web-dev-qa-db-ja.com

Openlayers 3でカーソルを合わせたときにカーソルを変更するにはどうすればよいですか？

リモートのGeoJSONリソースから追​​加されたフィーチャレイヤーに対話機能を追加できました。機能をクリックしてIDを取得し、AJAX=リクエストを発行して、機能に関するいくつかの関連情報をマップ領域外のページに表示します。

Selectインタラクションを使用しました。

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

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

javascriptopenlayers-3
17
Pierre Henry

コメントでAzathothによって提供されたサンプルリンクのおかげで、解決策を練りました：

  • oL3 pointermoveイベントの使用
  • 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

10
Pierre Henry

JQueryがなくても実行できます。

map.on("pointermove", function (evt) {
    var hit = this.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
        return true;
    }); 
    if (hit) {
        this.getTargetElement().style.cursor = 'pointer';
    } else {
        this.getTargetElement().style.cursor = '';
    }
});
18
Pablo

それがうまくいかない場合は、2の組み合わせを試してみてください。私のベクトルポップアップではうまくいくようです...

var target = map.getTarget();
var jTarget = typeof target === "string" ? $("#" + target) : $(target);
// change mouse cursor when over marker
$(map.getViewport()).on('mousemove', function (e) {
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
        return true;
    });
    if (hit) {
        jTarget.css("cursor", "pointer");
    } else {
        jTarget.css("cursor", "");
    }
});
13
ohjeeez

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

map.on('pointermove', function(e){
  var pixel = map.getEventPixel(e.originalEvent);
  var hit = map.hasFeatureAtPixel(pixel);
  map.getViewport().style.cursor = hit ? 'pointer' : '';
});
12
Robert M

私にとっては次のように機能しました：

map.on('pointermove', function(e) {
          if (e.dragging) return;
          var pixel = e.map.getEventPixel(e.originalEvent);
          var hit = e.map.forEachFeatureAtPixel(pixel, function (feature, layer) {
              return true;
          });
          e.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
        });

レイヤーフィルターも追加しました：

map.on('pointermove', function(e) {
      if (e.dragging) return;
      var pixel = e.map.getEventPixel(e.originalEvent);
      var hit = e.map.forEachFeatureAtPixel(pixel, function (feature, layer) {
          return layer.get('name') === 'myLayer';
      });
      e.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });

以前にレイヤーフィルターに使用していた古いソリューションが機能しなくなったため、新しいソリューションを選択する必要がありました。

var hit = e.map.hasFeatureAtPixel(e.pixel, function(layer){
             return layer.get('name') === 'myLayer';
          });
4
joschi81

私は次のコードでそれをしました：

var target = $(map.getTargetElement()); //getTargetElement is experimental as of 01.10.2015
map.on('pointermove', function (evt) {
    if (map.hasFeatureAtPixel(evt.pixel)) { //hasFeatureAtPixel is experimental as of 01.10.2015
        target.css('cursor', 'pointer');
    } else {
        target.css('cursor', '');
    }
});
2
NoRyb

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

var target = map.getTarget();

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

target.style.cursor = features.length > 0) ? 'pointer' : '';
1
Nurlan

Angular 2を使用している場合は、次のコードを使用する必要があります。

this.map.on("pointermove", function (evt) {
    var hit = evt.map.hasFeatureAtPixel(evt.pixel);
    this.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

マップ変数がメンバークラスである場合は、「this.map」として参照しますが、現在の関数内で宣言されている場合は、「マップ」として参照できます。しかし何よりも、あなたは書きません

map.getTargetElement()

しかしあなたは書く

this.getTargetElement()
1
nix86

_Uncaught TypeError: Cannot set property 'cursor' of undefined._

修正：map.getTargetElement()s.style.cursor = hit ? 'pointer' : '';の代わりにmap.getTarget().style.cursor = hit ? 'pointer' : '';

1
cinthyasm

別の方法（上記の回答の一部を組み合わせたものですが、さらに簡単です）：

map.on("pointermove", function (evt) {
    var hit = map.hasFeatureAtPixel(evt.pixel);
    map.getTargetElement().style.cursor = (hit ? 'pointer' : '');
});
1
JustAC0der

簡単な方法

map.on('pointermove', (e) => {
      const pixel = map.getEventPixel(e.originalEvent);
      const hit = map.hasFeatureAtPixel(pixel);
      document.getElementById('map').style.cursor = hit ? 'pointer' : '';
    });
}
0
Emin Adiloğlu

Itriedpointermoveイベントクロージャを最小限に抑えるために、必要でないときにスタイルを更新しないようにします。

例1：使用jQuery：

var cursorStyle = "";
map.on("pointermove", function (e) {
    let newStyle = this.hasFeatureAtPixel(e.pixel) ? "pointer" : "";
    newStyle !== cursorStyle && $(this.getTargetElement()).css("cursor", cursorStyle = newStyle);
});

例2：no jQuery：

var cursorStyle = "";
map.on("pointermove", function (e) {
    let newStyle = this.hasFeatureAtPixel(e.pixel) ? "pointer" : "";
    if (newStyle !== cursorStyle) {
        this.getTargetElement().style.cursor = cursorStyle = newStyle;
    }
});
0
AamirR