Как инициировать события на картах листовки?

Я пытаюсь выяснить, как вручную инициировать события для полигонов листов (загруженных через GeoJSON).Как инициировать события на картах листовки?

В двух словах, у меня есть карта листов с множеством полигонов. У меня также есть регулярная гиперссылка вне карты, которая при нажатии на нее должна запускать событие mouseover (или любое событие действительно) на определенном многоугольнике.

Как присвоить идентификаторы всем моим полигонам, чтобы я мог связывать гиперссылки (ы) с конкретным событием полигона? Или это даже самый логичный способ сделать это?

В конечном счете, я пытаюсь создать карту с многочисленными многоугольниками вместе с HTML-таблицей текстовых меток, связанных с каждым полигоном. Когда вы нажимаете на текст таблицы HTML, я бы хотел вызвать события на полигонах карты (и наоборот). Я просто не знаю, как ссылаться на каждый полигон.

Вот мой очень упрощенный HTML:

<body> 

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

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

</body>

Вот мой очень упрощенный JS:

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

});

источник

2012-07-10 Critter

OK, I'v Я понял это.

Вам необходимо создать событие щелчка для каждого многоугольника, который открывает всплывающее окно, и назначить уникальный идентификатор для каждого многоугольника, чтобы впоследствии вы могли ссылаться на него и вручную запускать его всплывающее окно.

Следующая решает эту задачу:

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

Затем вручную вызвать определенные слои нажмите событие, просто назвать это так:

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

Все в квадратных скобках является уникальный идентификатор который вы хотите вызвать. В этом случае я запускаю событие click для идентификатора слоя polyindex0.

Надеюсь, эта информация поможет кому-то еще!

источник

2012-07-24 20:56:58 Critter

Есть ли способ сделать это, не вникая в свойства фона? – sidonaldson

Я считаю, что это требует обновления с новым API, featureparse, похоже, не срабатывает, и addGeoJSON не кажется функцией – masterchief

Большое вам спасибо, что я искал что-то похожее на это. Map._layers ['polyindex0' ] .fire ('щелчок'); – 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); }

я = получил соответствующий координате, которая LatLng

источник

2012-07-11 15:10:35 uno2xx

Итак, быстрое обновление.

Просто позвоните fireEvent (или его псевдоним fire) на любом слое, который вам нужен.

Вам не нужно рисковать ._private [Vars], просто получить ссылку на целевой слой и убрать его, например.

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

источник

2016-06-02 01:36:06 danwild

Как инициировать события на картах листовки?

ответ

Смежные вопросы