লিফলেট - বিদ্যমান চিহ্নিতকারীগুলি কীভাবে সন্ধান করবেন এবং চিহ্নিতকারীগুলি মুছবেন?

Question

আমি লিফলেটটি ওপেন সোর্স ম্যাপ হিসাবে ব্যবহার শুরু করেছি, 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/references.html

Comments

সবচেয়ে ভাল উপায় হ'ল একটি স্তরগোষ্ঠী তৈরি করা। তারপরে আমরা লেয়ারগ্রুপে চিহ্নিতকারী যুক্ত করতে পারি। লেয়ারগ্রুপ একবারে সমস্ত চিহ্নিতকারীকে নিয়ন্ত্রণ করতে দেয়।

— নিওজিওমাট

লেয়ার গ্রুপগুলি অবশ্যই এটি হ্যান্ডেল করার সবচেয়ে পরিষ্কার উপায় definitely দস্তাবেজগুলি এখানে: লিফলেটজস

— জার শারদান

Answer 1

আপনাকে আপনার "ভ্যার মার্কার" ফাংশনটির বাইরে রাখতে হবে। তারপরে আপনি এটি অ্যাক্সেস করতে পারবেন:

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)

তবে আপনি কেবল সেই পথে সর্বশেষতম চিহ্নিতকারী রাখতে পারেন, কারণ প্রতিবার, সর্বশেষতম দ্বারা ভেরার মার্কারটি মুছে ফেলা হয়। তাই যাওয়ার একটি উপায় হ'ল বিশ্বব্যাপী মার্কারের অ্যারে তৈরি করা এবং আপনি বিশ্বব্যাপী অ্যারেতে আপনার চিহ্নিতকারী যুক্ত করুন।

Comments

লিফলেট দ্বারা ব্যবহৃত সমস্ত স্তর সংগ্রহ করার উপায় হওয়া উচিত। : /

— জ্যাকায়ালসাইন 1'12

স্তরগুলি অভ্যন্তরীণভাবে সংরক্ষণ করা হয় map._layers।

— ফ্ল্যাপ করুন

@ জ্যাকিয়ালাইন: লেয়ারগ্রুপ এবং ফিচারগ্রুপটি দেখুন

— মাইকেল ওয়েলস

Answer 2

আপনি চিহ্নিতকারীগুলিকে একটি অ্যারেতে ঠেলাতেও পারেন। কোড উদাহরণ দেখুন, এটি আমার জন্য কাজ করে:

/*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]);
    }  
}

Answer 3

এখানে কোড এবং জন্য ডেমো হয় মার্কার যোগ করার পদ্ধতি , মার্কার কোন মোছার এবং পেয়ে সব বর্তমান / যোগ চিহ্নিতকারী :

এখানে পুরো জেএসফিডাল কোড । এছাড়াও এখানে পূর্ণ পৃষ্ঠা ডেমো ।

চিহ্নিতকারী যুক্ত করা হচ্ছে:

// 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);

Comments

সমস্ত চিহ্নিতকারী পাওয়ার জন্য, map._layers[ml].featureআর কাজ করবে না।

— স্যামুয়েল ম্যান্ডেজ

Answer 4

এখানে একটি জেএসফিডাল যা আপনাকে আপনার onMapClickপদ্ধতি ব্যবহার করে চিহ্নিতকারী তৈরি করতে দেয় , তারপরে একটি লিঙ্কে ক্লিক করে এগুলি মুছুন।

প্রক্রিয়াটি অপরিশোধিতের অনুরূপ - প্রতিটি নতুন চিহ্নিতকারীকে একটি markersঅ্যারেতে যুক্ত করুন যাতে আপনি পরে যখন এটির সাথে যোগাযোগ করতে চান তখন আপনি একটি নির্দিষ্ট মার্কার অ্যাক্সেস করতে পারেন।

Comments

নিস! কেবল একটি প্রশ্ন, চিহ্নিতকারী () অ্যারে এখনও মুছে ফেলাগুলি রাখে, আপনি কীভাবে অ্যারে থেকে চিহ্নিতকারীগুলিকে মুছবেন? ধন্যবাদ!

— মিগুয়েল স্টিভেনস

আপনি deleteআইটেমটি সরাতে ব্যবহার করতে পারেন। উদাহরণস্বরূপ delete markers[$(this).attr('id')];।

— ব্রেট ডিউউডি

এই উদাহরণে টাইলগুলির জন্য অন্তর্ভুক্ত ক্লাউডমেড এপিআই এখন নিষ্ক্রিয় বলে মনে হচ্ছে। এখানে একটি কাঁটাচামচ যা হুবহু একই, তবে ক্লাউডমেডের পরিবর্তে ম্যাপকোয়েস্ট টাইল সার্ভার ব্যবহার করে, তাই কোনও এপিআই কী প্রয়োজন হয় না। jsfiddle.net/nqDKU

— ফোমাইগুই

Answer 5

(1) স্তরগুলি ধরে রাখার জন্য স্তর গ্রুপ এবং অ্যারে যুক্ত করুন এবং স্তরগুলিকে বৈশ্বিক চলক হিসাবে উল্লেখ করুন:

var অনুসন্ধান_গোষ্ঠী = নতুন এল.লায়ারগ্রুপ (); var ক্লিকআরআর = নতুন অ্যারে ();

(২) মানচিত্র যুক্ত করুন

(3) মানচিত্রে গ্রুপ স্তর যুক্ত করুন

map.addLayer (search_group);

(৪) মানচিত্রে যুক্ত হওয়া ফাংশন, একটি পপআপ সহ একটি লিঙ্ক রয়েছে যা ক্লিক করার পরে একটি অপসারণ বিকল্প থাকবে। এই লিঙ্কটি এর আইডি হিসাবে পয়েন্টের শেষ লম্বা হবে। এই আইডিটি তখন তুলনা করা হবে যখন আপনি আপনার তৈরি করা কোনও চিহ্নিত চিহ্নিতকে ক্লিক করেন এবং আপনি এটি মুছতে চান।

 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) অপসারণ ফাংশন, চিহ্নিতকরণটিকে সরানো আইডির সাথে লম্বা ল্যাটারের সাথে তুলনা করুন:

$(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);
            }

    }

    }  

Answer 6

আপনি যখন যুক্ত ফাংশনে চিহ্নিতকারীর শ্রদ্ধাটি সংরক্ষণ করেন তখন চিহ্নিতকারী এটিকে নিজের থেকে সরিয়ে ফেলতে পারে। অ্যারের দরকার নেই।

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]);
        }

Answer 7

আপনি layerGroupএখনও চেষ্টা করেছেন ?

এখানে ডক্স https://leafletjs.com/references-1.2.0.html#layergroup

এই স্তরটিতে কেবল একটি স্তর তৈরি করুন, সমস্ত চিহ্নিতকারী যুক্ত করুন, তারপরে আপনি সহজেই চিহ্নিতকারীকে খুঁজে পেতে এবং ধ্বংস করতে পারেন।

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

Answer 8

আমার ক্ষেত্রে, আমার বিভিন্ন স্তরের গোষ্ঠী রয়েছে যাতে ব্যবহারকারীরা টাইপ মার্কারগুলির ক্লাস্টারগুলি / লুকিয়ে রাখতে পারে। তবে, যে কোনও ক্ষেত্রে আপনি এটি করতে এবং মুছতে আপনার স্তর গোষ্ঠীগুলির লুপ করে পৃথক চিহ্নিতকারীকে মুছুন। লুপিংয়ের সময়, কাস্টম অ্যাট্রিবিউটের সাথে চিহ্নিতকারীকে সন্ধান করুন, আমার ক্ষেত্রে একটি 'কী' যুক্ত হবে, যখন চিহ্নিতকারীটিকে স্তর গ্রুপে যুক্ত করা হয়েছিল। শিরোনামের বৈশিষ্ট্য যুক্ত করার মতো আপনার 'কী' যুক্ত করুন। পরে এটি একটি স্তর বিকল্প অর্জিত হয়। আপনি যখন সেই ম্যাচটি খুঁজে পান, আপনি .রেভলায়ার () এবং এটি সেই নির্দিষ্ট চিহ্নিতকারী থেকে মুক্তি পাবে। আশা করি এটি তোমাকে সাহায্য করবে!

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);
                    }
                }
            }
        });
    });
}

Answer 9

আমি এর জন্য খুব দেরী হতে পারে তবে তবুও আমি অন্য কিছু জিনিস সহ একই কাজ করার জন্য একটি উন্মুক্ত যাদু প্রকল্প তৈরি করেছি

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

আপনি যদি চান দয়া করে চেকআউট এবং তারকা :)