如何解决传单标记聚类导致浏览器冻结
我同时使用 React-leaflet 和 leaflet-markercluster。我还有一个可变形的图像叠加和多边形。我在某些条件下在这些多边形中显示标记。有时多边形的标记超过 1 个,我想将它们聚类。
我有一个简单的组件:
import React,{ useEffect } from "react";
import { useLeaflet } from "react-leaflet";
import L from "leaflet";
import 'leaflet.markercluster/dist/leaflet.markercluster'
import "leaflet.markercluster/dist/MarkerCluster.css";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";
var marker_cluster = L.markerClusterGroup();
const MarkerCluster = ({ markers }) => {
const { map } = useLeaflet();
const createIcon = (difSat) => {
return L.AwesomeMarkers.icon({
icon: 'coffee',markerColor: 'red',className: 'awesome-marker awesome-marker-square'
});
}
useEffect(() => {
markers.forEach((marker) => {
const icon = createIcon(marker.dif_sat);
const _marker = L.marker([marker.latitude,marker.longitude],{
icon: icon
})
marker_cluster.addLayer(_marker);
}
);
if(markers) {
map.addLayer(marker_cluster);
}
},[markers,map]);
return null;
};
export default MarkerCluster;
当代码命中该行时,浏览器冻结:
marker_cluster.addLayer(_marker);
版本:
"leaflet": "^1.7.1","leaflet-geometryutil": "^0.9.3","leaflet.awesome-markers": "^2.0.5","leaflet.markercluster": "^1.4.1","react": "^16.12.0","react-dom": "^16.12.0","react-leaflet": "^2.8.0","react-leaflet-distortable-imageoverlay": "^1.0.0",
感谢您的帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。