如何解决如何通过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:此代码未经测试,但可以正常工作
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。