javascript - 如何使用 react-leaflet-pixi-overlay
问题描述
我试图实现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='© <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 不是函数
在互联网上找不到任何示例。
解决方案
使用以下版本使其工作:
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
检查沙箱工作
推荐阅读
- wordpress - WooCommerce 不允许我设置自定义订单状态
- c# - Viewbag 是否返回 null?
- python - 如何解决“列表”对象没有“应用”属性
- r - 无法使用 RODBC 附加 teradata 易失性表
- python - 为什么在 CNN 的输出层中使用 softmax 而不是 sigmoid 会得到截然不同的结果?
- python - Python如何在不引用其原始实例的情况下使用另一个实例的属性启动一个新实例?
- javascript - Jasmine 对瞬态属性的单元测试
- python - 接客户订单
- react-native - 此版本的“@react-navigation/native”与 React Navigation 5 不兼容
- alpha-vantage - 如何从 Alpha Vantage 获取实时数据?