如何在Leaflet地图多边形上触发事件？ [英] How to trigger events on Leaflet map polygons?
问题描述
我想知道如何手动触发单张多边形的事件（通过GeoJSON加载）。
简而言之，我有一张传单图多边形。我还在地图之外有一个常规的超链接，当点击时，应该在特定的多边形上触发鼠标悬停事件（或任何事件）。
如何我将ID分配给我的所有多边形，以便我可以将超链接绑定到特定的多边形的事件？或者说，即使是最合乎逻辑的方式呢？
最终，我试图用多个多边形创建一个地图，以及一个HTML表格与每个多边形相关联的文本标签。当点击HTML表格文本时，我想在地图上触发事件多边形（反之亦然）。我只是不知道如何引用每个多边形。
这是我非常简化的HTML：
< body>
< div id =mapstyle =height：550px; width：940px>< / div>
< a href =＃id =testlink>单击以触发特定的多边形鼠标悬停事件< / a>
< / body>
这是我非常简化的JS：
$（document）.ready（function（）{
//构建地图和多边形图层
函数buildMap （数据）{
var map = new L.Map（'map'）;
var cloudmadeUrl ='http：// {s} .tile.cloudmade.com ，
cloudmadeAttribution =''，
cloudmade = new L.TileLayer（cloudmadeUrl， {maxZoom：18，归属：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）{
//应用多边形样式
e.layer.setStyle（polyStyle）;
（function（layer，properties）{
layer.on（mouseover，function （e）{
//更改样式到悬浮版本
layer.setStyle（polyHover）;
}）;
}）;
layer.on（mouseout，function（e）{
//还原样式
layer.setStyle（polyStyle）;
}）;
layer.on（click，function（e）{
//做某事，像显示一个弹出窗口
console.log（e）;
}）;
}）（e.layer，e.properties）;
}）;
map.addLayer（geojsonLayer）;
geojsonLayer.addGeoJSON（myPolygons）;
}
//绑定超链接以在特定多边形上触发事件（通过多边形ID）
$（'＃testlink'）。click（function ）{
//触发一个特定的多边形鼠标悬停事件
}）;
}）;
好的，我已经弄清楚了。 p>
您需要为打开弹出窗口的每个多边形创建一个点击事件，并为每个多边形分配唯一的ID，以便稍后引用它，并手动触发其弹出窗口。 p>
以下内容完成：
var polyindex = 0;
popup = new L.Popup（）;
geojsonLayer = new L.GeoJSON（null，{}）;
geojsonLayer.on（featureparse，function（e）{
（function（layer，properties）{
// click event that触发弹出窗口并将其放在多边形上
layer.on（click，function（e）{
var bounds = layer.getBounds（）;
var popupContent =弹出内容;
popup.setLatLng（bounds.getCenter（））;
popup.setContent（popupContent）;
map.openPopup（弹出）;
}）;
}）（e.layer，e.properties）;
//分配多边形ID，以便稍后引用它
e.layer._leaflet_id ='polyindex'+ polyindex + '';
//增加用于唯一多边形ID的多重索引
polyindex ++;
}）;
//添加多边形图层
map.addLayer（geojsonLayer）;
geojsonLayer.addGeoJSON（neighbourhood_polygons）;
然后手动触发特定的图层点击事件，只需像这样调用：
map._layers ['polyindex0']。fire（'click'）;
方括号之间的所有内容都是要触发的图层的唯一ID。在这种情况下，我正在触发层ID为polyindex0的点击事件。
希望这个信息可以帮助别人！
I'm trying to figure out how to manually trigger events for Leaflet polygons (loaded via GeoJSON).
In a nutshell, I have a Leaflet map with numerous polygons. I also have a regular hyperlink outside of the map that when clicked, should trigger a mouseover event (or any event really) on a particular polygon.
How do I assign ID's to all of my polygons so that I can bind hyperlink(s) to a specific polygon's event? Or is that even the most logical way of doing this?
Ultimately, I'm trying to create a map with numerous polygons along with an HTML table of text labels that are associated to each polygon. When clicking on the HTML table text, I'd like to trigger events on the map polygons (and vice versa). I just don't know how to reference each polygon.
Here is my very simplified 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>
Here is my very simplified 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
});
});
OK, I've figured it out.
You need to create a click event for each polygon that opens the popup, and assign a unique ID to each polygon so you can reference it later and manually trigger its popup.
The following accomplishes this:
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);
Then to manually trigger a specific layers click event, simply call it like this:
map._layers['polyindex0'].fire('click');
Everything between the square brackets is the unique ID of the layer you want to trigger. In this case, I'm firing the click event of layer ID polyindex0.
Hope this info helps somebody else out!
这篇关于如何在Leaflet地图多边形上触发事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
