web-dev-qa-db-ja.com

OpenLayers 3の機能にイベントハンドラーを追加しますか？

次のコードを使用して、OpenLayers 3（OL3）のベクターレイヤーに機能を追加しています。

marker = new ol.Feature({
    geometry: new ol.geom.Point([longitude, latitude]),
    name: "Location Marker"
});
markerStyle = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 1.0],
    anchorXUnits: "fraction",
    anchorYUnits: "fraction",
    src: "Content/Images/OpenLayers/marker_trans.png"
  }),
  zIndex: 100000
});
marker.setStyle(markerStyle);
marker.on("click", function(e) {
  // do something
}, marker);
map.getSource().addFeature(marker);

マーカーは期待どおりに表示されますが、クリックイベントは発生しません。私は何を間違えていますか？

マップレベルで「クリック」に関連付けられたハンドラーが既にあることに注意してください。

map.on("click", function(e) {
  // do something
}, marker);
javascriptopenlayersopenlayers-3
15
ProfNimrod

最初：機能はクリックを発生させません！イベント機能の起動に関する情報については、 http://openlayers.org/en/master/apidoc/ol.Feature.html を確認してください。

機能がクリックされたかどうかを確認するために、ol.Mapの.forEachFeatureAtPixel(pixel, callback)関数があります。 （ http://openlayers.org/en/master/apidoc/ol.Map.html#forEachFeatureAtPixel ）コールバックはピクセルのすべてのフィーチャで実行されます。コールバックには2つの引数が渡されます：機能と機能が含まれるレイヤー。

Openlayersイベントハンドラーではなく、ビューポートのハンドラーを使用する場合は、.getEventPixel(event)関数が便利です。 openlayers eventhandlerを使用している場合、イベントにはプロパティ_.pixel_があります。 （ http://openlayers.org/en/master/apidoc/ol.Map.html#getEventPixel ）.getEventCoordinate(event)メソッドと.getCoordinateFromPixels(pixels)メソッドが役立つ場合がありますも。

したがって、次のようにmap.on（ "click"、...に追加します。

_map.on("click", function(e) {
    map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
        //do something
    })
});
_

JQueryでも同じこと：

_$(map.getViewport()).on("click", function(e) {
    map.forEachFeatureAtPixel(map.getEventPixel(e), function (feature, layer) {
        //do something
    });
});
_

純粋なJSでも同じこと：

_map.getViewport().addEventListener("click", function(e) {
    map.forEachFeatureAtPixel(map.getEventPixel(e), function (feature, layer) {
        //do something
    });
});
_

これを確認することもできますexample、この関数には2つの用途があります。1つ目はopenlayersイベント、2つ目はjQueryイベントです： http://openlayers.org/en/master/examples/icon.js

注意

Ol.interaction.Select（ http://openlayers.org/en/master/apidoc/ol.interaction.Select.html?unstable=true ）でこれを行う可能性もあります。しかし、これはこの場合には少し圧倒されます。また、選択されたフィーチャを、管理されていない別のレイヤーに内部的に移動するオープンレイヤーによって引き起こされる、直感的でない警告もあります。

とにかく、これはインタラクションに属するコレクションにリスナーを追加することで機能します。コレクションは、.getFeatures()で取得できます。

_interaction.getFeatures().on("add", function (e) { 
    // do something. e.element is the feature which was added
});
_
46
Simon Zyx

地図上にクリック可能なマーカーを追加するだけの場合は、オーバーレイを使用できます。 HTMLヘッダーで、マーカーのスタイルを定義します。

<style>
    #marker {
        width: 20px;
        height: 20px;
        border: 1px solid #088;
        border-radius: 10px;
        background-color: #0FF;
        opacity: 0.5;
    }
</style>

次に、マップが作成された後、ファイルのスクリプト部分で：

    // add marker
    var pos = ol.proj.fromLonLat([0.01123, 0.00612]);
    var marker = new ol.Overlay({
        position: pos,
        positioning: 'center-center',
        element: $('<div id="marker" title="Marker"></div>')
            .popover({
                'placement': 'top',
                'html': true,
                'content': '<strong>anything...</strong>'
            })
            .on('click', function (e) { $(".location-popover").not(this).popover('hide'); }),
        stopEvent: false
    });
    map.addOverlay(marker);
2
Amir Dashti