問題描述
我正在嘗試應用 Leaflet.MarkerCluster.LayerSupport.但我不知道如何使用它 :( 我已經閱讀了有關但我嘗試了很多次但它不起作用的文檔.
I′m trying to apply the Leaflet.MarkerCluster.LayerSupport. But I don′t know how to use it :( I′ve already read the documentation about but and I tried many times but it doesen′t work.
這是我的代碼
<!DOCTYPE html>
<html>
<head>
<title>Península</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" />
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<script src="leaflet.markercluster.layersupport-src.js"></script>
<script>
var NemachIcons =L.Icon.extend({
options:{
shadowUrl:'',
iconSize: [50,55],
iconAnchor: [45,45],
popupAnchor:[-3,-76]
}
});
var tiloIcon = new NemachIcons({iconUrl:'http://www.iconshock.com/img_jpg/SIGMA/general/jpg/256/pyramid_icon.jpg'}),
puebloIcon = new NemachIcons({iconUrl:'http://icons.iconseeker.com/png/fullsize/gant/pointless-bw-circle-i-use-it-iex.png'}),
gasIcon =new NemachIcons({iconUrl:'https://cdn2.iconfinder.com/data/icons/function_icon_set/circle_green.png'});
L.icon =function (options) {
return new L.Icon(options);
};
var sitios = new L. LayerGroup();
L.marker([20.683, -88.568], {icon: tiloIcon}).bindPopup('1').addTo(sitios),
L.marker([21.204547, -89.269466], {icon: tiloIcon}).bindPopup('2').addTo(sitios),
L.marker([20.332362, -89.647899], {icon: tiloIcon}).bindPopup('3').addTo(sitios),
L.marker([20.486417, -88.660218], {icon: tiloIcon}).bindPopup('4').addTo(sitios),
L.marker([21.151196, -87.958143], {icon: tiloIcon}).bindPopup('5').addTo(sitios);
var pueblo = new L.LayerGroup();
L.marker([20.9330, -89.0178], {icon: puebloIcon}).bindPopup('6').addTo(pueblo),
L.marker([20.6909, -88.2015], {icon: puebloIcon}).bindPopup('7').addTo(pueblo);
var gas = new L.LayerGroup();
L.marker([20.973907, -89.578931], {icon: gasIcon}).bindPopup('8').addTo(gas);
var mbAttr = ' ' +
'' +
'',
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr});
var map = L.map('map', {
center: [20.794527, -88.760612],
zoom: 8,
layers: [grayscale, sitios]
});
var baseLayers = {
//"Grayscale": grayscale,
//"Streets": streets
};
var overlays = {
"Pirámide": sitios,
"Poblado": pueblo,
"Servicio": gas
};
L.control.layers(baseLayers, overlays).addTo(map);
</script>
</body>
</html>
我會感謝你所有的回答
推薦答案
與 Leaflet.markercluster 一樣，您必須創建一個標記集群組，您的子組將進入該組.
Like for Leaflet.markercluster, you have to create a Marker Cluster Group where your sub-groups will go into.
在層支持的情況下，您創建一個具有層支持的標記集群組:
In the case of Layer Support, you create a Marker Cluster Group with Layer Support instead:
var mcg = L.markerClusterGroup.layerSupport().addTo(map);
然后您簽入"子組，以便他們知道在通過圖層控件選擇它們時必須進入該聚類組而不是直接進入地圖:
Then you "check in" the sub-groups, so that they know they have to go into that clustering group rather than directly to the map, when they are selected through the Layers Control:
mcg.checkIn([
sitios,
pueblo,
gas
]);
演示:http://plnkr.co/edit/CT3E63AKWze34FqUoiHn?p=preview
注意:您應該下載 JavaScript 文件 leaflet.markercluster.layersupport-src.js(如果尚未下載)，并將其放在您的 HTML 頁面旁邊，這樣它可以在本地引用它.
Note: you should download the JavaScript file leaflet.markercluster.layersupport-src.js, if not already done, and place it next to your HTML page, so that it can refer to it locally.
注意 2:如果您的使用只需要集群與 L.Control.Layers 的兼容性，您可能會對這個更簡單的插件感興趣:Leaflet.FeatureGroup.SubGroup.
Note 2: if your usage requires only compatibility of clustering with L.Control.Layers, you might be interested in this more simple plugin: Leaflet.FeatureGroup.SubGroup.
免責聲明:我是這些插件的作者.
Disclaimer: I am the author of these plugins.
這篇關于如何使用層應用傳單標記集群的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！