Leaflet load data and edit feature properties on mouse click

问题

I am loading map data from a GeoJSON file and attaching a click event for every polygone. on click, the script should fetch data from the server AND modify one of the clicked polygon's properties. i.e:

function onClick(e) {
    var status = e.target.feature.properties.ACCESS;
    $.ajax({
        url: "http://127.0.0.1:8080/?&u=x&p="+e.target.feature.properties.ID_PARCELL,
        dataType: 'jsonp',
        type: 'GET',
        success: function(data) {
        status = data.status;
        e.target.feature.properties.ACCESS = data.status;
        e.target.bindPopup("Owner: <b>"+ data.status +"</b>").openPopup();
        },
        error: function(data){console.log(data)}
    });
    e.target.feature.properties.ACCESS = status;
    map.fitBounds(e.target.getBounds());
}

But since the success function is an callback (synchronous or not, it doesn't really matter), I am not able to get back to the original event source (namely e) so I could modify one of its properties.

My question is: How can I get back to the event source after loading this data? Is there any generic Javascript way? If not, is there any way I can query the GeoJSON layer by feature ID ? (=> I can therefore send the feature ID in the ajax call, and simply get it back with the response)

回答1:

The solution is to send the desired variable e to the anonymous function by using the context entry:

function onClick(e) {
    var status = e.target.feature.properties.ACCESS;
    $.ajax({
        url: "http://127.0.0.1:8080/?&u=x&p="+e.target.feature.properties.ID_PARCELL,
        dataType: 'jsonp',
        context: e,
        type: 'GET',
        success: function(data) {
        status = data.status;
        e.target.feature.properties.ACCESS = data.status;
        e.target.bindPopup("Owner: <b>"+ data.status +"</b>").openPopup();
        },
        error: function(data){console.log(data)}
    });
    e.target.feature.properties.ACCESS = status;
    map.fitBounds(e.target.getBounds());
}

回答2:

You'r using the same event name 'e' on both Click and success functions. Try to change one of them. ie

function onClick(e) {
     var status = e.target.feature.properties.ACCESS;
     $.ajax({
         url: "http://127.0.0.1:8080/?&u=x&p="+e.target.feature.properties.ID_PARCELL,
         dataType: 'jsonp',
         type: 'GET',
         success: function(data, evt) {
             status = data.status;
             e.target.feature.properties.ACCESS = data.status;
             e.target.bindPopup("Owner: <b>"+ data.status +"</b>").openPopup();
        },
        error: function(data){console.log(data)}
     });
     e.target.feature.properties.ACCESS = status;
     map.fitBounds(e.target.getBounds());
 }

now you can change the initial event 'e' properties when the result is returned.
Hope this helps.

来源：https://stackoverflow.com/questions/17561436/leaflet-load-data-and-edit-feature-properties-on-mouse-click

标签

javascript

jquery

ajax

leaflet