将数组中的标记添加到带有图层支持的传单中的标记簇答案

【问题标题】：Adding markers from array into markercluster in leaflet with layer support将数组中的标记添加到带有图层支持的传单中的标记簇
【发布时间】：2014-11-24 17:15:56
【问题描述】：

我正在尝试使用包含纬度、经度、弹出信息和图层定义的多维数组来填充传单地图。问题是标记中的 2 个应该去 layer1，另外两个去 layer2。就其本身而言，所有四个标记都属于这两个层。感谢您的帮助。

var layer1 = new L.LayerGroup();
var layer2 = new L.LayerGroup();

var map = L.map('map', {
minZoom: 3,
maxZoom: 9,
layers: [layer1, layer2]
});

L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(map);

var overlays = {
"layer1": layer1,
"layer2": layer2
};

L.control.layers(null, overlays).addTo(map);

var markersList = [];
var markersList = [
[41.15,-8.61,'popup1','layer1'],
[41.15,-8.61,'popup2','layer1'],
[41.15,-8.31,'popup3','layer2'],
[41.15,-8.31,'popup4','layer2']
];

var markers = new L.MarkerClusterGroup();

for (var i = 0; i < markersList.length; i++) {
markers.addLayer(new L.marker([markersList[i][0], markersList[i][1]]).bindPopup(markersList[i][2]));
markers.addTo(this[markersList[i][3]]);
};

【问题讨论】：

标签： javascript arrays multidimensional-array leaflet

【解决方案1】：

MarkerClusterGroup 仅支持添加标记，不支持添加图层组。如果你想用 layercontrol 完成这个，你应该使用两个 MarkerCluster，这样你就可以切换它们。代码：

var tileLayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
});

var markersList = [
  [41.15, -8.61, 'popup1', 'cluster1'],
  [41.15, -8.61, 'popup2', 'cluster1'],
  [41.15, -8.31, 'popup3', 'cluster2'],
  [41.15, -8.31, 'popup4', 'cluster2']
];

var cluster1 = new L.MarkerClusterGroup();
var cluster2 = new L.MarkerClusterGroup();

for (var i = 0; i < markersList.length; i++) {
  this[markersList[i][3]].addLayer(new L.marker([markersList[i][0], markersList[i][1]]).bindPopup(markersList[i][2]));
};

var map = new L.Map('map', {
  'center': [0, 0],
  'zoom': 1,
  'layers': [tileLayer, cluster1, cluster2]
});

var overlays = {
  "Cluster 1": cluster1,
  "Cluster 2": cluster2
};

L.control.layers(null, overlays).addTo(map);

Plunker 示例：http://plnkr.co/edit/p7AgXAP9OjxVCYH0qczn?p=preview

【讨论】：