Leaflet 反应传单帆布

我正在尝试用传单标记法绘制大约50K点，不可能完成所需的时间渲染和ram。 我看到的新方法是使用传单画布在屏幕上绘制“不在DOM中”的点。 如何在React手册3.X中执行此操作。 我试过了 但它不支持传单的V3

---

有什么建议吗？

安装并导入库

npm i传单画布标记

创建一个自定义组件并使用useEffect来模拟香草传单的行为

从“react”导入{useffect}；
从“react传单”导入{useMap}；
输入“传单画布标记”；
从“传单”中输入L；
导出默认函数canvasmarker（）{
const map=useMap（）；
useffect（（）=>{
如果（！map）返回；
var ciLayer=L.canvasIconLayer（{}）.addTo（map）；
cLayer.addOnClickListener（函数（e，数据）{
控制台日志（数据）；
});
cLayer.addOnHoverListener（函数（e，数据）{
console.log（数据[0].data.\u传单\u id）；
});
var icon=L.icon({
iconUrl:“https://unpkg.com/leaflet@1.7.1/dist/images/marker icon.png“，
iconSize:[20,18]，
iconAnchor:[10,9]，
});
var标记=[]；
对于（变量i=0；i<50000；i++）{
var marker=L.marker(
[58.5578+数学随机（）*1.8,29.0087+数学随机（）*3.6]，
{icon:icon}
).b.（“我是”+I）；
标记器。推（标记器）；
}
添加层（标记）；
}，[地图]；
返回null；
}

将自定义组件作为MapContainer子级包含

<MapContainer center={position} zoom={10} style={{ height: "100vh" }}>
   <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      />
   <LeafletCanvasMarker />
</MapContainer>

您应该得到与下图类似的结果：

---

难以置信！谢谢

<MapContainer center={position} zoom={10} style={{ height: "100vh" }}>
   <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      />
   <LeafletCanvasMarker />
</MapContainer>