有没有办法将 onEachFeature 事件(见下文)中通过 .getCenter() 创建的中心点添加到 L.Marker 或类似对象,该对象包含所有创建的中心点该事件可以被 Leaflet.Markercluster 使用吗?
我认为使用 featureGroup 可能是解决方案,但显然不是。
我可以通过 L.Marker 或 L.FeatureGroup 上的 addTo(map) 方法在 map 上显示非聚集中心点,但不幸的是,当我尝试在这两个创建的对象上使用markerCluster时, map 显示为空。浏览器的控制台上没有出现错误消息。
我对 JS 还很陌生,所以我有一种预感,我缺少一些基本的东西,也许是关于 L.Markercluster 本身,对于这里的任何菜鸟错误,我深表歉意。
图书馆:
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97fbf2f6f1fbf2e3d7a6b9a5b9a7" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="563a3337303a3322166778647866" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<!-- ESRI Leaflet -->
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bdd8cecfd490d1d8dcdbd1d8c9fd8f938d9389" rel="noreferrer noopener nofollow">[email protected]</a>/dist/esri-leaflet.js"></script>
<!-- Leaflet-markercluster -->
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9c5ccc8cfc5ccdd87c4c8dbc2ccdbcac5dcdaddccdbe9988799879f" rel="noreferrer noopener nofollow">[email protected]</a>/dist/MarkerCluster.css"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="620e0703040e07164c0f0310090710010e171116071022534c524c54" rel="noreferrer noopener nofollow">[email protected]</a>/dist/MarkerCluster.Default.css"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e08c8581868c8594ce8d81928b8592838c9593948592a0d1ced0ced6" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.markercluster.js"></script>
<!-- Leaflet.MarkerCluster.LayerSupport -->
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3cfc6c2c5cfc6d78dcec2d1c8c6d1c0cfd6d0d7c6d18dcfc2dac6d1d0d6d3d3ccd1d7e3928d938d96" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.markercluster.layersupport.js"></script>
脚本:
<script>
var map = L.map('map', {
center: [42.389810, -72.524684],
zoom: 5
});
var esriTopo = L.esri.basemapLayer('Topographic').addTo(map);
var ProjectMap = L.esri.featureLayer ({
url: 'https://services.arcgis.com/2gdL2gxYNFY2TOUb/arcgis/rest/services/NECSC_Test_Data/FeatureServer/1',
//cheap hack to making the polygons invisible
weight: 0,
fillOpacity: 0,
// creating the centerpoints
onEachFeature: function(feature,layer){
if (feature.geometry.type = 'Polygon') {
var bounds = layer.getBounds();
var center = bounds.getCenter();
var centerpoints = L.marker(center);
centerpointlayer.addLayer(centerpoints);
// centerpointlayer defined below as global variable
};
};
}).addTo(map);
var centerpointlayer = L.featureGroup();
//
var clusters = L.markerClusterGroup.layerSupport();
clusters.addTo(map);
clusters.checkIn(centerpointlayer);
map.zoomIn(5);
map.zoomOut(5);
</script>
</body>
</html>
最佳答案
Gah...事实证明我错误地实现了 L.Markercluster(即,不像 API 文档中所说的那样)。最后/script 之前的最后几行代码应为:
var centerpointlayer = L.layerGroup();
var clusters = L.markerClusterGroup.layerSupport();
clusters.addLayer(centerpointlayer);
map.addLayer(clusters);
关于javascript - Leaflet:MarkerCluster 可以使用的多边形中心对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45626674/