MapBox - 使用图层控件添加可单击的clusterGroup

时间:2016-01-09 20:24:59

标签: leaflet mapbox

我还在学习,我有点卡住了。我可能会立刻尝试做很多事情。我有一个MapBox地图,可以从MapBox站点上的示例中获取可点击的图层菜单。我还有一个MarkerClusterGroup也可以工作,并且在地图上始终可见。有没有办法我可以以某种方式打开/关闭MarkerClusterGroup,就像var overlays中标识的层一样= {...

以下是我认为需要帮助的代码:

  var layers = {
  Streets: L.mapbox.tileLayer('mapbox.streets').addTo(map),
  Satellite: L.mapbox.tileLayer('mapbox.satellite'),
  Light: L.mapbox.tileLayer('mapbox.light'),
  };

  var overlays = {
  DataA: L.mapbox.featureLayer().loadURL('/data/ctsnew.geojson'),
  DataB: L.mapbox.featureLayer().loadURL('/data/selectZipcodes.geojson'),
  };

// Since featureLayer is an asynchronous method, we use the `.on('ready'`
// call to only use its marker data once we know it is actually loaded.

   Markers: L.mapbox.featureLayer('examples.map-h61e8o8e').on('ready', function(e) {
// The clusterGroup gets each marker in the group added to it
// once loaded, and then is added to the map

   var clusterGroup = new L.MarkerClusterGroup();
   e.target.eachLayer(function(layer) {
       clusterGroup.addLayer(layer);
   });

   map.addLayer(clusterGroup);
   });

可能是滥用括号这么简单的事情。提前谢谢。

1 个答案:

答案 0 :(得分:0)

您必须在overlays对象中包含标记群集组。例如,即使您的群集组目前为空,也可以在定义overlays之前对其进行实例化。

然后在下载数据后填写。

var layers = {
  Streets: L.mapbox.tileLayer('mapbox.streets').addTo(map),
  Satellite: L.mapbox.tileLayer('mapbox.satellite'),
  Light: L.mapbox.tileLayer('mapbox.light'),
};

var clusterGroup = L.markerClusterGroup();

var overlays = {
  DataA: L.mapbox.featureLayer().loadURL('/data/ctsnew.geojson'),
  DataB: L.mapbox.featureLayer().loadURL('/data/selectZipcodes.geojson'),
  Markers: clusterGroup
};

// Since featureLayer is an asynchronous method, we use the `.on('ready'`
// call to only use its marker data once we know it is actually loaded.

L.mapbox.featureLayer('examples.map-h61e8o8e').on('ready', function(e) {
  // The clusterGroup gets each marker in the group added to it
  // once loaded, and then is added to the map

  e.target.eachLayer(function(layer) {
    clusterGroup.addLayer(layer);
  });

  map.addLayer(clusterGroup); // use that line if you want to automatically add the cluster group to the map once it has downloaded its data.
});