如何使用 react-leaflet-pixi-overlay答案

【问题标题】：How to use react-leaflet-pixi-overlay如何使用 react-leaflet-pixi-overlay
【发布时间】：2021-08-03 14:00:16
【问题描述】：

我正在尝试实现docs of react-leaflet-pixi-overlay 的最小示例。您可以在下面找到代码：

import React from "react";
import PixiOverlay from "react-leaflet-pixi-overlay";
import { Map, TileLayer } from "react-leaflet";
import { renderToString } from "react-dom/server";
import ReactDOM from "react-dom";

const App = () => {
  const markers = [
    {
      id: "randomStringOrNumber",
      iconColor: "red",
      position: [-37.814, 144.96332],
      popup: renderToString(<div>All good!</div>),
      onClick: () => alert("marker clicked"),
      tooltip: "Hey!"
    },
    {
      id: "2",
      iconColor: "blue",
      position: [-37.814, 144.96332],
      popup: "Quack!",
      popupOpen: true, // if popup has to be open by default
      onClick: () => alert("marker clicked"),
      tooltip: "Nice!"
    }
  ];

  return (
    <Map
      preferCanvas={true}
      maxZoom={20}
      minZoom={3}
      center={[-37.814, 144.96332]}
      // Other map props...
    >
      <TileLayer
        url="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      <PixiOverlay markers={markers} />
    </Map>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我已经在下面的sandbox中实现了，但是没有用：

_reactLeaflet.useLeaflet 不是函数

在互联网上找不到任何示例。

【问题讨论】：

该库似乎不适用于 react-leaflet 版本 3.x，但仅适用于 2.x，因为它使用后者。
使用 2.x 会引发以下错误 Cannot read property 'getContainer' of undefined
确实如此。它似乎对两者都有效

标签： javascript reactjs leaflet pixi.js

【解决方案1】：

使用以下版本使其工作：

leaflet 1.3.4
react 16.14.0
react-dom 16.14.0
react-leaflet 2.8.0
react-leaflet-pixi-overlay 1.0.10
react-scripts 1.1.4

检查sandbox工作

【讨论】：