Leaflet - จะค้นหาเครื่องหมายที่มีอยู่และลบเครื่องหมายได้อย่างไร?

ฉันได้เริ่มใช้แผ่นพับเป็นแผนที่โอเพ่นซอร์สhttp://leaflet.cloudmade.com/

โค้ด jQuery ต่อไปนี้จะเปิดใช้งานการสร้างเครื่องหมายบนแผนที่บนแผนที่คลิก:

 map.on('click', onMapClick);
function onMapClick(e) {
        var marker = new L.Marker(e.latlng, {draggable:true});
        map.addLayer(marker);
        marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
};

แต่ขณะนี้ไม่มีวิธีใดสำหรับฉัน (ในรหัสของฉัน) ในการลบเครื่องหมายที่มีอยู่หรือค้นหาเครื่องหมายทั้งหมดที่ฉันสร้างขึ้นบนแผนที่และใส่ลงในอาร์เรย์ ใครสามารถช่วยฉันเข้าใจวิธีการทำเช่นนี้? ดูเอกสารแผ่นพับได้ที่นี่: http://leaflet.cloudmade.com/reference.html

คุณต้องใส่ "var marker" ออกจากฟังก์ชัน จากนั้นคุณสามารถเข้าถึงได้ในภายหลัง:

var marker;
function onMapClick(e) {
        marker = new L.Marker(e.latlng, {draggable:true});
        map.addLayer(marker);
        marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
};

หลังจากนั้น:

map.removeLayer(marker)

แต่คุณสามารถมีได้เฉพาะเครื่องหมายล่าสุดเท่านั้นเนื่องจากในแต่ละครั้งเครื่องหมาย var จะถูกลบโดยล่าสุด วิธีหนึ่งที่จะดำเนินต่อไปคือการสร้างอาร์เรย์ของเครื่องหมายทั่วโลกและคุณเพิ่มเครื่องหมายของคุณในอาร์เรย์ส่วนกลาง

คุณยังสามารถกดเครื่องหมายลงในอาร์เรย์ ดูตัวอย่างโค้ดสิ่งนี้ใช้ได้กับฉัน:

/*create array:*/
var marker = new Array();

/*Some Coordinates (here simulating somehow json string)*/
var items = [{"lat":"51.000","lon":"13.000"},{"lat":"52.000","lon":"13.010"},{"lat":"52.000","lon":"13.020"}];

/*pushing items into array each by each and then add markers*/
function itemWrap() {
for(i=0;i<items.length;i++){
    var LamMarker = new L.marker([items[i].lat, items[i].lon]);
    marker.push(LamMarker);
    map.addLayer(marker[i]);
    }
}

/*Going through these marker-items again removing them*/
function markerDelAgain() {
for(i=0;i<marker.length;i++) {
    map.removeLayer(marker[i]);
    }  
}

นี่คือรหัสและการสาธิตการเพิ่มเครื่องหมาย , ลบใด ๆ ของเครื่องหมายและยังได้รับในปัจจุบัน / เครื่องหมายทั้งหมดที่เพิ่ม :

นี่คือทั้งรหัส JSFiddle นอกจากนี้ที่นี่คือการสาธิตเต็มหน้า

การเพิ่มเครื่องหมาย:

// Script for adding marker on map click
map.on('click', onMapClick);

function onMapClick(e) {

    var geojsonFeature = {

        "type": "Feature",
        "properties": {},
        "geometry": {
                "type": "Point",
                "coordinates": [e.latlng.lat, e.latlng.lng]
        }
    }

    var marker;

    L.geoJson(geojsonFeature, {

        pointToLayer: function(feature, latlng){

            marker = L.marker(e.latlng, {

                title: "Resource Location",
                alt: "Resource Location",
                riseOnHover: true,
                draggable: true,

            }).bindPopup("<input type='button' value='Delete this marker' class='marker-delete-button'/>");

            marker.on("popupopen", onPopupOpen);

            return marker;
        }
    }).addTo(map);
}

การลบเครื่องหมาย:

// Function to handle delete as well as other events on marker popup open

function onPopupOpen() {

    var tempMarker = this;

    // To remove marker on click of delete button in the popup of marker
    $(".marker-delete-button:visible").click(function () {
        map.removeLayer(tempMarker);
    });
}

การรับเครื่องหมายทั้งหมดในแผนที่:

// getting all the markers at once
function getAllMarkers() {

    var allMarkersObjArray = []; // for marker objects
    var allMarkersGeoJsonArray = []; // for readable geoJson markers

    $.each(map._layers, function (ml) {

        if (map._layers[ml].feature) {

            allMarkersObjArray.push(this)
            allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON()))
        }
    })

    console.log(allMarkersObjArray);
}

// any html element such as button, div to call the function()
$(".get-markers").on("click", getAllMarkers);

นี่คือjsFiddleที่ให้คุณสร้างเครื่องหมายโดยใช้onMapClickวิธีการของคุณจากนั้นลบออกโดยคลิกที่ลิงค์

กระบวนการนี้คล้ายกับของที่ไม่ได้กำหนด - เพิ่มเครื่องหมายใหม่แต่ละตัวลงในmarkersอาร์เรย์เพื่อให้คุณสามารถเข้าถึงเครื่องหมายเฉพาะเมื่อคุณต้องการโต้ตอบในภายหลัง

(1) เพิ่มกลุ่มเลเยอร์และอาร์เรย์เพื่อเก็บเลเยอร์และอ้างอิงถึงเลเยอร์เป็นตัวแปรส่วนกลาง:

var search_group = ใหม่ L.LayerGroup (); var clickArr = อาร์เรย์ใหม่ ();

(2) เพิ่มแผนที่

(3) เพิ่มเลเยอร์กลุ่มในแผนที่

map.addLayer (search_group);

(4) ฟังก์ชันเพิ่มลงในแผนที่พร้อมป๊อปอัปที่มีลิงก์ซึ่งเมื่อคลิกจะมีตัวเลือกลบ ลิงก์นี้จะมีเนื่องจาก id เป็น lat ยาวของจุด จากนั้น ID นี้จะถูกเปรียบเทียบกับเมื่อคุณคลิกที่เครื่องหมายที่คุณสร้างขึ้นและคุณต้องการลบออก

 map.on('click', function(e) {
        var clickPositionMarker = L.marker([e.latlng.lat,e.latlng.lng],{icon: idMarker});
        clickArr.push(clickPositionMarker);
        mapLat = e.latlng.lat;
        mapLon = e.latlng.lng;
        clickPositionMarker.addTo(search_group).bindPopup("<a name='removeClickM' id="+e.latlng.lat+"_"+e.latlng.lng+">Remove Me</a>")
                .openPopup();   

                /*   clickPositionMarker.on('click', function(e) {
                  markerDelAgain(); 
                }); */


});

(5) ฟังก์ชั่นลบเปรียบเทียบเครื่องหมาย lat long กับ id ที่ยิงในการลบ:

$(document).on("click","a[name='removeClickM']", function (e) {

      // Stop form from submitting normally
    e.preventDefault();

    for(i=0;i<clickArr.length;i++) {

    if(search_group.hasLayer(clickArr[i]))
    {
        if(clickArr[i]._latlng.lat+"_"+clickArr[i]._latlng.lng==$(this).attr('id'))
            {
                hideLayer(search_group,clickArr[i]);
                clickArr.splice(clickArr.indexOf(clickArr[i]), 1);
            }

    }

    }  

เมื่อคุณบันทึกความเคารพลงในเครื่องหมายในฟังก์ชันการเพิ่มเครื่องหมายจะลบออกได้เอง ไม่จำเป็นต้องมีอาร์เรย์

function addPump(){
   var pump = L.marker(cords,{icon: truckPump}).addTo(map).bindPopup($('<a href="#" class="speciallink">Remove ME</a>').click(function() {
            map.removeLayer(pump);
          })[0]);
        }

คุณลองlayerGroupหรือยัง?

เอกสารที่นี่https://leafletjs.com/reference-1.2.0.html#layergroup

เพียงสร้างเลเยอร์เพิ่มเครื่องหมายทั้งหมดลงในเลเยอร์นี้จากนั้นคุณสามารถค้นหาและทำลายเครื่องหมายได้อย่างง่ายดาย

var markers = L.layerGroup()
const marker = L.marker([], {})
markers.addLayer(marker)

ฉันอาจจะสายเกินไปสำหรับเรื่องนี้ แต่ฉันก็ยังได้สร้างโปรเจ็กต์ open sorce ขึ้นมาเพื่อทำแบบเดียวกันพร้อมกับสิ่งอื่น ๆ

https://github.com/ikishanoza/ionic-leaflet

กรุณาชำระเงินและติดดาวถ้าคุณต้องการ :)

ในกรณีของฉันฉันมีกลุ่มเลเยอร์ต่างๆเพื่อให้ผู้ใช้สามารถแสดง / ซ่อนคลัสเตอร์ของเครื่องหมายประเภทที่เหมือนกันได้ แต่ไม่ว่าในกรณีใดคุณจะลบเครื่องหมายแต่ละรายการโดยการวนซ้ำบนกลุ่มเลเยอร์ของคุณเพื่อค้นหาและลบ ในขณะที่วนซ้ำให้ค้นหาเครื่องหมายที่มีแอตทริบิวต์ที่กำหนดเองในกรณีของฉันคือ "คีย์" ที่เพิ่มเมื่อเพิ่มเครื่องหมายลงในกลุ่มเลเยอร์ เพิ่ม "คีย์" ของคุณเช่นเดียวกับการเพิ่มแอตทริบิวต์ชื่อเรื่อง หลังจากนี้จะได้รับตัวเลือกเลเยอร์ เมื่อคุณพบว่าตรงกันคุณจะ. removeLayer () และจะกำจัดเครื่องหมายนั้น หวังว่าจะช่วยคุณได้!

eventsLayerGroup.addLayer(L.marker([tag.latitude, tag.longitude],{title:tag.title, layer:tag.layer, timestamp:tag.timestamp, key:tag.key, bounceOnAdd: true, icon: L.AwesomeMarkers.icon({icon: 'vignette', markerColor: 'blue', prefix: '', iconColor: 'white'}) }).bindPopup(customPopup(tag),customOptions).on('click', markerClick)); 

function removeMarker(id){
    var layerGroupsArray = [eventsLayerGroup,landmarksLayerGroup,travelerLayerGroup,marketplaceLayerGroup,myLayerGroup];
    $.each(layerGroupsArray, function (key, value) {
        value.eachLayer(function (layer) {
            if(typeof value !== "undefined"){
                if (layer.options.layer){
                    console.log(layer.options.key);
                    console.log(id);
                    if (id === layer.options.key){
                        value.removeLayer(layer);
                    }
                }
            }
        });
    });
}