如何在小叶贴图多边形上触发事件？
如何在小叶贴图多边形上触发事件？
提问于 2012-07-11 04:08:57
我正在尝试弄清楚如何手动触发小叶多边形的事件(通过GeoJSON加载)。
简而言之，我有一个包含许多多边形的小叶贴图。我在地图之外也有一个常规的超链接，当点击它时，应该会触发一个特定多边形上的鼠标悬停事件(或任何事件)。
如何将ID分配给所有多边形，以便可以将超链接绑定到特定多边形的事件？或者这是最合乎逻辑的方式吗？
最终，我尝试创建一个包含大量多边形的地图，以及一个与每个多边形相关联的文本标签的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
});
});回答 3
Stack Overflow用户
回答已采纳
发布于 2012-07-25 04:56:58
好了，我已经弄明白了。
您需要为打开弹出窗口的每个多边形创建一个单击事件，并为每个多边形分配一个唯一的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。在本例中，我将激发layer ID polyindex0的click事件。
希望这些信息能帮助到其他人！
Stack Overflow用户
发布于 2016-06-02 09:36:07
所以，快速更新。
只需在需要的任何层上调用fireEvent (或其别名fire)即可。
你不需要冒._privateVars的风险，只需要获得一个对目标层的引用，然后就可以了。
var vectorLayer = map.getLayer('myVectorLayer');
vectorLayer.fire('click');Stack Overflow用户
发布于 2012-07-11 23:10:36
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=得到一个对应的坐标，即LatLng
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11421127
复制相关文章
相似问题