如何應用傳單標記羣集使用層

我試圖應用Leaflet.MarkerCluster.LayerSupport。但我不知道如何使用它:(從來就已經閱讀文檔有關，但我試過很多次，但doesen't工作。如何應用傳單標記羣集使用層

這是我的代碼

<!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" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> 
</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>

I'會感激你的答案

來源

2016-03-04 Micmic

喜歡Leaflet.markercluster，你必須創建一個標記羣集組在您的子組將進入。

在層支持的情況下，您創建一個標記羣集組與圖層支持改爲：

var mcg = L.markerClusterGroup.layerSupport().addTo(map);

然後你「入住」的子組，讓他們知道他們必須進入該羣集組，而不是直接到地圖，當他們通過圖層控制選擇：

mcg.checkIn([ 
    sitios, 
    pueblo, 
    gas 
]);

演示：http://plnkr.co/edit/CT3E63AKWze34FqUoiHn?p=preview

注意：你應該下載 JavaScript文件leaflet.markercluster.layersupport-src.js，如果尚未完成，接下來把它給你的HTML頁面，以便它可以重新在當地傳播。注意2：如果您的使用只需要與L.Control.Layers進行羣集兼容，您可能會對這個更簡單的插件感興趣：Leaflet.FeatureGroup.SubGroup。

聲明：我是這些插件的作者。

來源

2016-03-04 05:07:35 ghybs

嘿！你是最好的！謝謝！現在地圖完美無缺！ :) – Micmic

感謝您的反饋！請你可以將答案標記爲已接受，以便人們知道你的問題解決了嗎？ – ghybs

如何應用傳單標記羣集使用層

回答

相關問題