web-dev-qa-db-ja.com

リーフレットマップのデフォルトカーソルを変更するにはどうすればよいですか？

特定のコントロールボタンが押されたときに、デフォルトのカーソルアイコンを変更しようとしています。コンテナーdivでcssを使用することで部分的に成功しましたが、これを行うと、カーソルの移動状態が上書きされます。つまり、マップ内を移動している間は移動アイコンが表示されなくなります（ただし、マーカー上にあるときは表示されません）。

すべてを再定義せずに特別なカーソル動作を実現するために、APIを介してハッキングされていない方法があるかどうかを知りたいです。

これは私がやろうとしたことです、＃mapはリーフレットマップのコンテナーdivです。

#map[control=pressed] {
    cursor: url('..custom.png');
}
javascriptleaflet
25
Marco Toniut

編集5.18.2017：リーフレットフレームワークを介した未加工のCSSおよびJavaScript（推奨）

私は BoxZoomプラグイン のソースコードを調べていたところ、 Leafletの組み込みDOMミューテーター を使用した彼らのアプローチに気付き、それをここで宣伝したいと考えていました...これは確かに最高です練習。

例jsfiddle

CSSのどこかに、このようなクラスが含まれています。

.leaflet-container.crosshair-cursor-enabled {
    cursor:crosshair;
}

十字線を有効にする場合は、JSでこれを実行します。

// Assumes your Leaflet map variable is 'map'..
L.DomUtil.addClass(map._container,'crosshair-cursor-enabled');

次に、十字線を無効にする場合は、JSでこれを実行します。

L.DomUtil.removeClass(map._container,'crosshair-cursor-enabled');

元の回答：マップレベルの十字線

@ scud42は私を正しい道に導きました。 JQueryを使用して、次のようにリーフレットマップカーソルを変更できます。

$('.leaflet-container').css('cursor','crosshair');

その後、マップカーソルをリセットする場合は、次のようにします。

$('.leaflet-container').css('cursor','');

Edit 1.21.2016：機能ごとの十字線

ポリゴンやフィーチャの頂点など、classNameオプションをサポートする個々のフィーチャの十字線を有効にすることもできます。

ポインタの十字線（ jsfiddle ）を切り替えるドラッグ可能な頂点の例を次に示します。

var svg_html_default = '<div style="margin:0px;padding:0px;height:8px;width:8px;border-style:solid;border-color:#FFFFFF;border-width:1px;background-color:#424242"</div>';

var default_icon = L.divIcon({
  html: svg_html_default,
  className: 'leaflet-mouse-marker',
  iconAnchor: [5,5],
  iconSize: [8,8]
});

var m = new L.marker([33.9731003, -80.9968865], {
  icon: default_icon,
  draggable: true,
  opacity: 0.7
}).addTo( map );

m.on("mouseover",function(){$('.leaflet-mouse-marker').css('cursor','crosshair');});

m.on("mouseout",function(){$('.leaflet-mouse-marker').css('cursor','');});
41
elrobis

リーフレットのスタイルでは、カーソルの動作を変更できます。これらをローカルCSSに配置して変更を加えます。

/* Change cursor when mousing over clickable layer */
.leaflet-clickable {
  cursor: crosshair !important;
}
/* Change cursor when over entire map */
.leaflet-container {
  cursor: help !important;
}
10
scud42

十字線に設定：

document.getElementById('map').style.cursor = 'crosshair'

元に戻す：

document.getElementById('map').style.cursor = ''
3
chelahmy

active疑似クラスを使用します。

#map:active {
    cursor: url('..custom.png');
}

JSFiddle

カーソルを上書きするには、おそらく要素をドラッグしたときにテキストとデフォルトのカーソルが切り替わらないように、css3属性user-select: noneを使用する必要があります。その実装はJSFiddleにも示されています。

2
Austin Brunkhorst

これは私のために働いたものです：

// CSS first. Add this to leaflet stylesheet.
.leaflet-interactive.wait-cursor-enabled {
    cursor: wait !important;
}

// JS select from map container and add class to each element
let map = L.map('map');
let els = map.getContainer().querySelectorAll('.leaflet-interactive');
for(let el of els){
   el.classList += ' wait-cursor-enabled'; 
}

//JS remove class once no longer needed
let els = map.getContainer().querySelectorAll('.leaflet-interactive.wait-cursor-enabled');
for(let el of els){
   el.classList.remove("wait-cursor-enabled");
}
1
cityremade
$('.leaflet-container').css('cursor','crosshair');
0
saadat ali