Cri*_*ter 19 events map geojson leaflet
我正在试图弄清楚如何手动触发Leaflet多边形的事件(通过GeoJSON加载).
简而言之,我有一张带有多个多边形的Leaflet地图.我还在地图外部有一个常规超链接,当点击它时,应该触发特定多边形上的鼠标悬停事件(或任何事件).
如何为所有多边形分配ID,以便我可以将超链接绑定到特定多边形的事件？或者这甚至是最合乎逻辑的做法？
最终,我正在尝试创建一个包含大量多边形的地图以及与每个多边形相关联的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
});
});
Cri*_*ter 19
好的,我已经弄清楚了.
您需要为打开弹出窗口的每个多边形创建一个单击事件,并为每个多边形分配一个唯一ID,以便稍后引用它并手动触发其弹出窗口.
以下完成此操作:
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');
方括号之间的所有内容都是您要触发的图层的唯一ID.在这种情况下,我正在触发图层ID polyindex0的click事件.
希望这些信息可以帮助别人!
所以，快点更新吧。
只需在您需要的任何层上调用fireEvent（或其别名fire）。
您不需要冒险 ._private[Vars]，只需获取对目标层的引用并开火，例如
var vectorLayer = map.getLayer('myVectorLayer');
vectorLayer.fire('click');
| 归档时间： |
|
| 查看次数： |
30317 次 |
| 最近记录： |