如何触发传单地图多边形上的事件? [英] How to trigger events on Leaflet map polygons?
问题描述
我正在尝试弄清楚如何手动触发 Leaflet 多边形的事件(通过 GeoJSON 加载).
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.
如何为所有多边形分配 ID，以便将超链接绑定到特定多边形的事件?或者这是最合乎逻辑的方式吗?
最终，我正在尝试创建一个包含大量多边形的地图以及与每个多边形相关联的文本标签的 HTML 表格.单击 HTML 表格文本时，我想在地图多边形上触发事件(反之亦然).我只是不知道如何引用每个多边形.
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.
这是我非常简化的 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
});
});
推荐答案
好的，我想通了.
您需要为打开弹出窗口的每个多边形创建一个点击事件，并为每个多边形分配一个唯一的 ID，以便您以后可以引用它并手动触发其弹出窗口.
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.
以下实现:
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');
方括号之间的所有内容都是您要触发的图层的唯一 ID.在这种情况下，我触发了图层 ID polyindex0 的点击事件.
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!
这篇关于如何触发传单地图多边形上的事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
