web-dev-qa-db-ja.com

リーフレットマップのポリゴンでイベントをトリガーする方法は？

リーフレットポリゴン（GeoJSONを介して読み込まれる）のイベントを手動でトリガーする方法を理解しようとしています。

一言で言えば、私は多数のポリゴンを備えたリーフレットマップを持っています。また、マップの外側に通常のハイパーリンクがあり、クリックすると、特定のポリゴンでマウスオーバーイベント（または実際には任意のイベント）がトリガーされます。

ハイパーリンクを特定のポリゴンのイベントにバインドできるように、すべてのポリゴンに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
});

});
eventsmapgeojsonleaflet
19
Critter

わかりました。

ポップアップを開くポリゴンごとにクリックイベントを作成し、後で参照して手動でポップアップをトリガーできるように、各ポリゴンに一意の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のクリックイベントを発生させています。

この情報が他の誰かに役立つことを願っています！

17
Critter

だから、クイックアップデート。

必要なレイヤーで fireEvent （またはそのエイリアスfire）を呼び出すだけです。

._private [Vars]を危険にさらす必要はありません。ターゲットレイヤーへの参照を取得して、火を消すだけです。

var vectorLayer = map.getLayer('myVectorLayer');
vectorLayer.fire('click');
4
danwild
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である対応する座標を取得

2
uno2xx