Как применять маркерный кластер листов с использованием слоев

Я пытаюсь применить Leaflet.MarkerCluster.LayerSupport. Но я не знаю, как использовать его :(I've уже читать документацию о, но и я пытался много раз, но это 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

Как применять маркерный кластер листов с использованием слоев

ответ

Смежные вопросы