如何解决反应传单画布
我正在尝试使用传单标记方法绘制大约 50K 点,但由于需要时间渲染和 ram,这是不可能的。 我看到的新方法是使用 Leaflet-canvas 在屏幕上绘制点,而不是在 DOM 中。 我如何在 React 传单 3.X 中执行此操作。 我试过了 https://www.npmjs.com/package/react-leaflet-canvas-markers 但是不支持传单的V3。
有什么建议吗?
解决方法
安装并导入库 npm i leaflet-canvas-marker
创建一个自定义组件并使用一个 useEffect 来模拟 vanilla Leaflet 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='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
/>
<LeafletCanvasMarker />
</MapContainer>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。