反应传单帆布答案

【问题标题】：React leaflet Canvas反应传单帆布
【发布时间】：2021-07-06 18:14:35
【问题描述】：

我正在尝试使用传单标记方法绘制大约 50K 点，但由于需要时间渲染和内存，这是不可能的。我看到的新方法是使用 Leaflet-canvas 在屏幕上绘制点而不是在 DOM 中。如何在 React 传单 3.X 中执行此操作。我试过了 https://www.npmjs.com/package/react-leaflet-canvas-markers 但不支持传单的V3。

有什么建议吗？

【问题讨论】：

标签： leaflet react-leaflet react-leaflet-v3

【解决方案1】：

安装并导入库npm i leaflet-canvas-marker

创建一个自定义组件并使用一个 useEffect 来模仿 vanilla 传单example 的行为

import { useEffect } from "react";
import { useMap } from "react-leaflet";
import "leaflet-canvas-marker";
import L from "leaflet";

export default function LeafletCanvasMarker() {
  const map = useMap();

  useEffect(() => {
    if (!map) return;

    var ciLayer = L.canvasIconLayer({}).addTo(map);

    ciLayer.addOnClickListener(function (e, data) {
      console.log(data);
    });
    ciLayer.addOnHoverListener(function (e, data) {
      console.log(data[0].data._leaflet_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 markers = [];
    for (var i = 0; i < 50000; i++) {
      var marker = L.marker(
        [58.5578 + Math.random() * 1.8, 29.0087 + Math.random() * 3.6],
        { icon: icon }
      ).bindPopup("I Am " + i);
      markers.push(marker);
    }
    ciLayer.addLayers(markers);
  }, [map]);

  return 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>

你应该得到类似于下图的结果：

【讨论】：