如何在Leaflet地图多边形上触发事件？

我想弄清楚如何手动触发Leaflet多边形的事件（通过GeoJSON加载）。如何在Leaflet地图多边形上触发事件？

简而言之，我有一个有多个多边形的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 
}); 

});

来源

2012-07-10 Critter

e想通了。

你需要创建一个打开弹出每个多边形的点击事件，并分配一个唯一的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的点击事件。

希望这个信息可以帮助别人！

来源

2012-07-24 20:56:58 Critter

有没有办法做到这一点不钻研背景属性？ – sidonaldson 2013-09-16 16:28:50

我相信这需要使用新的API进行更新，featureparse似乎不会触发，并且addGeoJSON似乎不是一个函数 – masterchief 2014-05-14 00:43:52

非常感谢你，我正在寻找类似的东西.. map._layers ['polyindex0' ] .fire（ '点击'）; – EvilInside 2014-08-04 21:10:56

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

好的，我的电话号码是

来源

2012-07-11 15:10:35 uno2xx

所以，快速更新。

只需拨打fireEvent（或它的别名fire）在您需要的任何层上。

你不需要._private风险[瓦尔]，只是到达目标层中的参考和火源，例如

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

来源

2016-06-02 01:36:06 danwild

如何在Leaflet地图多边形上触发事件？

回答

相关问题