Leaflet -> 删除 CircleLayer 不起作用
[英]Leaflet -> Removing CircleLayer doesn't work
问题描述
我正在尝试从 map 中删除一个圆形图层以绘制一个新图层。
我尝试了不同的解决方案，但没有一个对我有用。
也许有人能找到办法。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin="">
</script>
<script src="Scripts/jquery-3.4.1.min.js"></script>
<style type="text/css">
#mapid {height: 480px; width: 480px;}
</style>
</head>
<body>
<div id="mapid">
</div>
<p>Umkreis Km<select id="umkreis">
<option value="--">--</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select></p>
<script>
var latitude = 0;
var longitude = 0;
// Creating the Map
var mymap = L.map('mapid').setView([53.079, 8.801], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data©<a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoicGVpY2tlciIsImEiOiJjazBveW9pcmQwZWV0M25vMHh4dnRkdmM3In0.JwNOtv10EsQrukcXe-Q2sQ'
}).addTo(mymap);
function onMapClick(e) {
if (circles != undefined) {
mymap.removeLayer(circles);
}
if (document.getElementById("umkreis").value == "--") {
alert("nothing");
}
else {
var fence = document.getElementById("umkreis").value * 100;
alert(fence);
}
latitude = e.latlng.lat;
longitude = e.latlng.lng;
var circles = L.circle([latitude, longitude], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: fence
}).addTo(mymap);
//alert("Latitude: " + e.latlng.lat + " Longitude: " + e.latlng.lng);
}
mymap.on('click', onMapClick);
</script>
</body>
</html>
我什至尝试添加一个图层组并向其添加一个圆圈，然后使用 removeLayer() 和 clearLayers() 将其删除，就像有人在 Stack Overflow 中使用它来解决相同的问题一样。
2 个解决方案
解决方案1
0 2019-09-19 10:38:50
你有两个变量叫做circle 。 第一个是在onMapClick之外定义的，并且永远不会被初始化。 第二种，在检查前者是否有值后，在onMapClick内部定义并初始化同名。 您只需要重构onMapClick ：
function onMapClick(e) {
if (circles != undefined) {
mymap.removeLayer(circles);
}
if (document.getElementById("umkreis").value == "--") {
alert("nothing");
}
else {
var fence = document.getElementById("umkreis").value * 100;
alert(fence);
}
latitude = e.latlng.lat;
longitude = e.latlng.lng;
circles = L.circle([latitude, longitude], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: fence
}).addTo(mymap);
//alert("Latitude: " + e.latlng.lat + " Longitude: " + e.latlng.lng);
}
解决方案2
0 已采纳 2019-09-19 12:26:18
您的小提琴的编辑版本现在可以使用：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin="">
</script>
<script src="Scripts/jquery-3.4.1.min.js"></script>
<script>
</script>
<style type="text/css">
#mapid {height: 480px; width: 480px;}
</style>
</head>
<body>
<div id="mapid">
</div>
<p>Umkreis Km<select id="umkreis">
<option value="--">--</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select></p>
<script>
var latitude = 0;
var longitude = 0;
var circles;
// Creating the Map
var mymap = L.map('mapid').setView([53.079, 8.801], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data©<a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoicGVpY2tlciIsImEiOiJjazBveW9pcmQwZWV0M25vMHh4dnRkdmM3In0.JwNOtv10EsQrukcXe-Q2sQ'
}).addTo(mymap);
function onMapClick(e) {
//circles.remove();
//if (mymap.hasLayer(circles)) {
// alert("yes");
//}
if (circles != undefined) {
mymap.removeLayer(circles);
mymap.clearLayers();
}
if (document.getElementById("umkreis").value == "--") {
alert("nothing");
}
else {
var fence = document.getElementById("umkreis").value * 100;
alert(fence);
}
latitude = e.latlng.lat;
longitude = e.latlng.lng;
circles = L.circle([latitude, longitude], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: fence
}).addTo(mymap);
//alert("Latitude: " + e.latlng.lat + " Longitude: " + e.latlng.lng);
}
mymap.on('click', onMapClick);
</script>
</body>
</html>
_onLocationFound 在 leaflet.locationcontrol 中不起作用
[英]_onLocationFound doesn't work in leaflet.locationcontrol
如果使用 Leaflet.markercluster，则 Leaflet VectorGrid 交互性不起作用
[英]Leaflet VectorGrid interactivity doesn't work if Leaflet.markercluster is used
来自插件的dcjs.leaflet在Choropleth的弹出窗口不起作用
[英]dcjs.leaflet from addons The popup in Choropleth doesn't work
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.