¿Cómo desencadenar eventos en los polígonos de mapa de folletos?

Estoy tratando de averiguar cómo activar eventos manualmente para los polígonos de Leaflet (cargados a través de GeoJSON).¿Cómo desencadenar eventos en los polígonos de mapa de folletos?

En pocas palabras, tengo un mapa de folleto con numerosos polígonos. También tengo un hipervínculo normal fuera del mapa que, al hacer clic, debe desencadenar un evento mouseover (o cualquier evento real) en un polígono particular.

¿Cómo asigno identificaciones a todos mis polígonos para que pueda enlazar hipervínculos al evento de un polígono específico? ¿O es esa la forma más lógica de hacer esto?

En última instancia, estoy tratando de crear un mapa con numerosos polígonos junto con una tabla HTML de etiquetas de texto que están asociadas a cada polígono. Al hacer clic en el texto de la tabla HTML, me gustaría activar eventos en los polígonos del mapa (y viceversa). Simplemente no sé cómo hacer referencia a cada polígono.

Aquí es mi HTML muy simplificada:

<body> 

    <div id="map" style="height: 550px; width:940px"></div> 

    <a href="#" id="testlink">Click to trigger a specific polygon mouseover event</a> 

</body>

Aquí está mi JS muy simplificadas:

$(document).ready(function() { 

// build the map and polygon layer 
function buildMap(data) { 

    var map = new L.Map('map'); 

    var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/***yourkeyhere***/66267/256/{z}/{x}/{y}.png', 
     cloudmadeAttribution = '', 
     cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}); 

    var mapLoc = new L.LatLng(43.675198,-79.383287); 
    map.setView(mapLoc, 12).addLayer(cloudmade); 

    var geojsonLayer = new L.GeoJSON(null, {}); 

    geojsonLayer.on("featureparse", function (e){ 

     // apply the polygon style 
     e.layer.setStyle(polyStyle); 

     (function(layer, properties) { 
      layer.on("mouseover", function (e) { 
       // change the style to the hover version 
       layer.setStyle(polyHover); 
       }); 
      }); 
      layer.on("mouseout", function (e) { 
       // reverting the style back 
       layer.setStyle(polyStyle); 
      }); 
      layer.on("click", function (e) { 
       // do something here like display a popup 
       console.log(e); 
      }); 
     })(e.layer, e.properties); 

    }); 

    map.addLayer(geojsonLayer); 

    geojsonLayer.addGeoJSON(myPolygons);  

} 

// bind the hyperlink to trigger event on specific polygon (by polygon ID?) 
$('#testlink').click(function(){ 
    // trigger a specific polygon mouseover event here 
}); 

});

Fuente

2012-07-10 Critter

OK, I'v e lo descubrí.

Debe crear un evento de clic para cada polígono que abre la ventana emergente, y asignarle una ID única a cada polígono para que pueda consultarlo más tarde y activar manualmente su ventana emergente.

A continuación se lleva a cabo esta:

var polyindex = 0; 

    popup = new L.Popup(); 

    geojsonLayer = new L.GeoJSON(null, {}); 

    geojsonLayer.on("featureparse", function (e){ 

     (function(layer, properties) { 

      //click event that triggers the popup and centres it on the polygon 
      layer.on("click", function (e) { 
       var bounds = layer.getBounds(); 
       var popupContent = "popup content here"; 
       popup.setLatLng(bounds.getCenter()); 
       popup.setContent(popupContent); 
       map.openPopup(popup); 
      }); 

     })(e.layer, e.properties); 

     //assign polygon id so we can reference it later 
     e.layer._leaflet_id = 'polyindex'+polyindex+''; 

     //increment polyindex used for unique polygon id's 
     polyindex++; 
    }); 

    //add the polygon layer 
    map.addLayer(geojsonLayer); 
    geojsonLayer.addGeoJSON(neighbourhood_polygons);

A continuación, para ejecutar manualmente una capas específicas de eventos de clic, simplemente lo llaman así:

map._layers['polyindex0'].fire('click');

Todo entre los corchetes es el ID único del capa que quieres disparar En este caso, estoy disparando el evento click de la capa ID polyindex0.

¡Espero que esta información ayude a alguien más!

Fuente

2012-07-24 20:56:58 Critter

¿Hay alguna manera de hacerlo sin profundizar en las propiedades de fondo? – sidonaldson

Creo que esto necesita actualizarse con la nueva API, featureparse no parece disparar y agregarGeoJSON no parece ser una función – masterchief

Muchas gracias Estaba buscando algo similar a esto .. map._layers ['polyindex0' ] .fire ('clic'); – EvilInside

function clickMarker(i){ 
var popupContent = "content here or html format", 
popup = new L.Popup({offset:new L.Point(0,-28)}); 

popup.setLatLng(LatLng); 
popup.setContent(popupContent); 
map.panTo(LatLng); 
map.openPopup(popup); }

i = consiguió una coordenada correspondiente que se LatLng

Fuente

2012-07-11 15:10:35 uno2xx

Por lo tanto, actualización rápida.

Simplemente llame al fireEvent (o alias fire) en la capa que necesite.

No necesita arriesgarse ._private [Vars], simplemente haga una referencia a la capa objetivo y dispare, p. Ej.

var vectorLayer = map.getLayer('myVectorLayer'); 
vectorLayer.fire('click');

Fuente

2016-06-02 01:36:06 danwild

¿Cómo desencadenar eventos en los polígonos de mapa de folletos?

Respuesta

Cuestiones relacionadas