如何通过Select传单仅选择一层

问题描述

我正在尝试使用选择仅选择一层。

这是我第一次使用传单，我使用了这份出色的指南：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>

解决方法

将clusters和heat变量更改为global。并仅将两个图层之一添加到地图。

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：此代码未经测试，但可以正常工作

geojson leaflet