Come attivare gli eventi sui poligoni della mappa degli opuscoli?

Sto cercando di capire come attivare manualmente gli eventi per i poligoni Leaflet (caricati tramite GeoJSON).Come attivare gli eventi sui poligoni della mappa degli opuscoli?

In breve, ho una mappa Leaflet con numerosi poligoni. Ho anche un normale collegamento ipertestuale al di fuori della mappa che, quando si fa clic, dovrebbe attivare un evento mouseover (o qualsiasi evento in realtà) su un particolare poligono.

Come assegnare ID a tutti i miei poligoni in modo che sia possibile associare i collegamenti ipertestuali a un evento di un poligono specifico? O è anche il modo più logico per farlo?

In definitiva, sto cercando di creare una mappa con numerosi poligoni insieme a una tabella HTML di etichette di testo associate a ciascun poligono. Facendo clic sul testo della tabella HTML, vorrei attivare eventi sui poligoni della mappa (e viceversa). Non so come fare riferimento a ciascun poligono.

Ecco il mio HTML molto semplificata:

<body> 

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

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

</body>

Ecco la mia JS molto semplificate:

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

});

fonte

2012-07-10 Critter

OK, I'v e l'ho capito.

È necessario creare un evento click per ogni poligono che apre il popup e assegnare un ID univoco a ciascun poligono in modo da poterlo richiamare in un secondo momento e attivarne manualmente il popup.

Di seguito realizza questo:

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

Poi per attivare manualmente il layer specifici eventi Click, è sufficiente chiamare in questo modo:

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

Tutto tra le parentesi quadre è l'ID univoco del livello che vuoi attivare. In questo caso, sto facendo scattare l'evento click dell'ID di livello polyindex0.

Spero che questa informazione aiuti qualcun altro a uscire!

fonte

2012-07-24 20:56:58 Critter

C'è un modo per farlo senza scavare nelle proprietà di sfondo? – sidonaldson

Credo che questo debba essere aggiornato con la nuova API, featureparse non sembra sparare e aggiungereGeoJSON non sembra essere una funzione – masterchief

Grazie mille stavo cercando qualcosa di simile a questo .. map._layers ['polyindex0' ] .fire ('click'); – 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 = ottenuto un corrispondente coordinata che è LatLng

fonte

2012-07-11 15:10:35 uno2xx

Quindi, aggiornamento rapido.

Basta chiamare il numero fireEvent (o è lo pseudonimo fire) su qualsiasi livello sia necessario.

Non è necessario rischiare ._private [Vars], basta ottenere un riferimento al livello di destinazione e sparare, ad es.

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

fonte

2016-06-02 01:36:06 danwild

Come attivare gli eventi sui poligoni della mappa degli opuscoli?

risposta

Problemi correlati