Encontrar el número de características de punto ubicadas dentro de una capa de polígono utilizando L.esri.query

Question

Soy nuevo en JavaScript y Leaflet, así que por favor, tened paciencia conmigo. Estoy trabajando en un mapa de Leaflet en el que estoy llamando a dos capas REST separadas, una capa de puntos (árboles del patrimonio) y una capa de polígonos (barrios), utilizando L.esri.featureLayer. Lo que me gustaría hacer es añadir una funcionalidad a la capa poligonal del barrio en la que se muestre una ventana emergente con el número de árboles patrimoniales que se encuentran dentro de un barrio determinado cuando el usuario haga clic en ella. Como ya estoy usando el plugin de L.esri, estoy intentando hacer esto usando la funcionalidad de L.esri.query, pero no puedo averiguar cómo conseguir que funcione. Aquí está el JavaScript que tengo hasta ahora:

//Define neighborhoods feature layer
var nbohoods = L.esri.featureLayer({
url:'https://www.portlandmaps.com/arcgis/rest/services/Public/COP_OpenData/MapServer/3',
minZoom: 12,
opacity: 20,
onEachFeature: function(layer){
    //define trees as query layer
    var trees = L.esri.query({
        url: 'https://www.portlandmaps.com/arcgis/rest/services/Public/COP_OpenData/MapServer/26',
        }).within(nbohoods);
    }
});

nbohoods.bindPopup(function (layer) {
    return L.Util.template("<p><strong>Neighborhood Name: </strong> {MAPLABEL}</p>", layer.feature.properties 
                      );
});

Sé que no estoy haciendo referencia a los resultados de la función en la ventana emergente del final (no sé cómo) y tampoco sé cómo acceder a la geometría de la variable nbohoods. ¿Alguna idea de cómo puedo conseguir que esto funcione?

Answer 1

No es necesario utilizar el onEachFeature evento. En cambio, en el bindPopup se quiere mostrar sólo un mensaje temporal:

nbohoods.bindPopup(function (layer) {
  // return temporary message while the "queryTrees" function called from the popupopen function runs:
    return L.Util.template('getting tree info ...');
});

Y luego quieres configurar un oyente de eventos para el popupopen y es desde aquí desde donde se iniciará la consulta. Esto se hace porque el popupopen le proporciona tanto la capa/característica en la que se ha hecho clic como una referencia a la ventana emergente abierta.

nbohoods.on('popupopen', function(evt) {
    queryTrees(evt.layer.feature, evt.popup);
});

Por último, defina el queryTrees que estamos usando arriba, que toma una característica y una referencia a la ventana emergente. Hará la consulta y luego actualizará la ventana emergente cuando la consulta esté completa.

var queryTrees = function(feature, popup) {
  L.esri.query({
    url:'https://www.portlandmaps.com/arcgis/rest/services/Public/COP_OpenData/MapServer/26'
  })
  .within(feature)
  .run(function(error, featureCollection) {
    // this function is called when the query is complete. Update the currently open popup.
    popup.setContent(L.Util.template('Number of Trees: ' + featureCollection.features.length));
  }.bind(this));
}

Ponerlo todo junto, aquí hay una muestra con todo funcionando.