Leaflet Layer Control，从不同文件中获取GeoJSON数据

Question

我使用marketClusters创建了一个Leaflet映射，其中GeoJSON数据在一个单独的js文档中作为变量进行结构化（并获取）。 见下面的例子。

var markers = [ { "name":"test", "city":"Stockholm, Sweden", "market":"test", "website":"<a target='_blank' href='http://test.se'>test.se</a>", "lat":5.336391, "lng":1.027678,

我现在要添加的是对我的地图的图层控制，我可以根据变量“markers”中的“market”在不同的节点之间切换（它再次位于单独的文件中）。

作为一个例子，我想为“市场”添加4-5个不同的变量，然后想要在图层控件中的那些之间切换。

我的代码基于leaflet.markerCluster插件示例：

 var map = L.map( 'map', { center: [10.0, 5.0], minZoom: 2, zoom: 2 }); L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>' }).addTo( map ); var myURL = jQuery( 'script[src$="leaf-demo.js"]' ).attr( 'src' ).replace( 'leaf-demo.js', '' ); var myIcon = L.icon({ iconUrl: myURL + '../images/pin24.png', iconRetinaUrl: myURL + '../images/pin48.png', iconSize: [29, 24], iconAnchor: [9, 21], popupAnchor: [0, -14] }); var markerClusters = L.markerClusterGroup(); for ( var i = 0; i < markers.length; ++i ) { var popup = '<b>' + markers[i].name + '</b>' + '<br/>' + markers[i].city + '<br/>' + markers[i].market + '<br/>'+ markers[i].website; var m = L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon} ) .bindPopup( popup ); markerClusters.addLayer( m ); } map.addLayer( markerClusters ); 

我有点迷失如何继续，任何输入都非常感谢！

Answer 1

如果你想让你的标记聚集在一起（混合“橙子和苹果”），你可能会对Leaflet.FeatureGroup.SubGroup插件感兴趣（见演示 ）。 只需为每个market价值创建一个子组，并将其父级设置为markerClusters 。

否则，您只需为每组标记创建1个标记聚类组。 但群集可能会重叠。

免责声明：我是该插件的作者。