如何使用 react-leaflet-pixi-overlay

Question

我试图实现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);

我已经在以下沙箱中实现了它，但不起作用：

_reactLeaflet.useLeaflet 不是 function

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

Answer 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

检查沙箱工作