21

リモートの GeoJSON リソースから追​​加されたフィーチャ レイヤーに双方向性を追加することができました。地物をクリックすると、その ID が取得され、AJAX リクエストが起動され、地物に関する関連情報がマップ エリアの外側のページに表示されます。

インターンシップを利用しましたSelect。

ユーザーがマップ上のフィーチャをクリックできることをさらに明確にしたいと思います。マウスがに含まれる機能をホバーしたときに、マウスカーソルを「手」の「カーソル」に変更する方法はありますol.layer.Vectorか?

ドキュメント、このサイト、またはグーグルで何も見つかりませんでした。

4

12 に答える 12

15

これを行う別の方法を次に示します。

map.on('pointermove', function(e){
  var pixel = map.getEventPixel(e.originalEvent);
  var hit = map.hasFeatureAtPixel(pixel);
  map.getViewport().style.cursor = hit ? 'pointer' : '';
});
于 2016-02-02T17:57:46.687 に答える
10

コメントでAzathothによって提供されたサンプルリンクのおかげで、私は解決策を見つけました:

  • OL3pointermoveイベントの使用
  • jQuery を使用してターゲット要素を取得し、カーソル スタイルを変更する

コードは次のとおりです。

var cursorHoverStyle = "pointer";
var target = map.getTarget();

//target returned might be the DOM element or the ID of this element dependeing on how the map was initialized
//either way get a jQuery object for it
var jTarget = typeof target === "string" ? $("#"+target) : $(target);

map.on("pointermove", function (event) {
    var mouseCoordInMapPixels = [event.originalEvent.offsetX, event.originalEvent.offsetY];

    //detect feature at mouse coords
    var hit = map.forEachFeatureAtPixel(mouseCoordInMapPixels, function (feature, layer) {
        return true;
    });

    if (hit) {
        jTarget.css("cursor", cursorHoverStyle);
    } else {
        jTarget.css("cursor", "");
    }
});

OpenLayers サイトの例へのリンクは次のとおりです: http://openlayers.org/en/v3.0.0/examples/icon.html

于 2014-09-26T13:54:08.663 に答える
1

ターゲット要素を取得する簡単な方法 

var target = map.getTarget();

target = typeof target === "string" ?
    document.getElementById(target) : target;

target.style.cursor = features.length > 0) ? 'pointer' : '';
于 2015-12-24T10:06:47.920 に答える