Блог

Главная - Вопросы по программированию - Как выбрать только один слой с помощью Select (листовки)

Как выбрать только один слой с помощью Select (листовки)

#leaflet #geojson

#листовка #geojson

Вопрос:

Я пытаюсь выбрать только один слой с помощью select.

Я впервые использую leaflet, и я использую это замечательное руководство: https://maptimeboston.github.io/leaflet-intro

Теперь у меня на карте есть часть «markerclusters» и последняя «heatmap», и я хочу выбрать только один слой или другой, или оба.. Я искал примеры, но я не знаю, как их применить.

(Как вы можете видеть, выбор прямо сейчас является декоративным.)

И вот изображение моей карты:

Изображение

вот мой код, заранее спасибо!

 <html>
<head>
  <title>MAPA PRUEBA</title>
   <link rel="stylesheet" href="leaflet.css"/>
  <link rel="stylesheet" href="MarkerCluster.css"/> 
  <script src="leaflet.js"></script>
  <script src="leaflet.markercluster.js"></script> 
  <script src="leaflet.heat.js"></script>
  <script src="jquery-2.1.1.min.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>
<div id="panel" style = "top-left:10px; background-color:#D3D3D3;">
                    <label>Tipo de mapa</label>
                    <select id="estilo" onchange="Bordeaux()">
                      <option value="points" >PUNTOS</option>
                      <option value="heat">MAPA DE CALOR</option>
                      
                    </select>
  <div id="map"></div>

  <script>

 // initialize the map
  var map = L.map('map').setView([40.46, -3.74], 4);

  // load a tile layer
  L.tileLayer('http://192.168.0.103/osm/{z}/{x}/{y}.png',

    {
      attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
      maxZoom: 17,
      minZoom: 1
    }).addTo(map);
    

 // load GeoJSON from an external file

$.getJSON("rodents.geojson",function(data){
    var ratIcon = L.icon({
      iconUrl: 'images/marker-icon.png'});
      var rodents = L.geoJson(data,{
      pointToLayer: function(feature,latlng){
      var marker = L.marker(latlng,{icon: ratIcon});
      marker.bindPopup(feature.properties.Location);
       return marker;}
    });
    var clusters = L.markerClusterGroup();
    clusters.addLayer(rodents);
    map.addLayer(clusters);
}); 

// HEAT LAYER   
 
$.getJSON("rodents.geojson",function(data){ 
   var locations = data.features.map(function(rat) {
// the heatmap plugin wants an array of each location
      var location = rat.geometry.coordinates.reverse();
      location.push(1.9);
      return location;
});

    var heat = L.heatLayer(locations, { radius: 50 });
    map.addLayer(heat);
   
});
  </script>
</body>
</html>

Ответ №1:

измените переменную clusters и heat на глобальную. И добавьте на карту только один из обоих слоев.

 var clusters, heat;

$.getJSON("rodents.geojson",function(data){
    // ...
    clusters = L.markerClusterGroup();
    clusters.addLayer(rodents);
    map.addLayer(clusters);
}); 

// HEAT LAYER   
$.getJSON("rodents.geojson",function(data){ 
 //...
    heat = L.heatLayer(locations, { radius: 50 });
});

Затем добавьте / удалите слои в вашей onchange функции из select :

 <select id="estilo" onchange="changeFnc(this)">
   <option value="points" >PUNTOS</option>
   <option value="heat">MAPA DE CALOR</option>
</select>

function changeFnc(obj){
   var value = obj.value;
   if(value == "points"){
      if(map.hasLayer(clusters)){
         map.removeLayer(clusters);
      }
      map.addLayer(points);
   }else{
      if(map.hasLayer(points)){
         map.removeLayer(points);
      }
      map.addLayer(clusters);
   }
}

PS: Этот код не тестировался, но должен работать