Leaflet -> Удаление CircleLayer не работает - PullRequest
Новая
       1

Leaflet -> Удаление CircleLayer не работает

2 голосов
/ 19 сентября 2019

Я пытаюсь удалить круговой слой с карты, чтобы нарисовать новый.

Я пробовал разные решения, но ни одно из них не помогло мне.

Возможно, кто-то может найти способ. 

<!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&copy;<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 (), как кто-то использовал ее здесь, в переполнении стека, чтобы исправить ту же проблему.

Ответы [ 2 ]

0 голосов
/ 19 сентября 2019

Отредактированная версия вашей скрипки, которая работает сейчас: 

<!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&copy;<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>
0 голосов
/ 19 сентября 2019

У вас есть две переменные с именем 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);
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...