リーフレットでgeojsonポイントにラベルを付ける方法は?


11

リーフレットマップでgeojsonポイントのラベルを表示するにはどうすればよいですか?

ありLeaflet.label今の賛成で廃止されL.Tooltipが、ホバー上の唯一のショーテキストが。ユーザーの操作を必要とせずに、テキストラベルを地図上に直接表示したい。

入力例-https://gist.github.com/maphew/e168430e999fc738eeb3448feda121cd

望ましい結果(テキストラベルが付いた緑のポイント、その他のグラフィック要素はコンテキストのみ):

テキストラベル付きの点のシミュレーションマップ

更新:ポップアップツールチップではなく、下の画像のようにマップに溶け込むテキストを作成したいと思います。

不要な部分に取り消し線を引いた画像


3
ツールチップオプションを使用するだけpermanentですか?leafletjs.com/reference-1.1.0.html#tooltip-optionから:Whether to open the tooltip permanently or only on mouseover
BradHards '27

3
L.MarkersとL.DivIconsを使用します。
IvanSanchez 2017年

これを純粋にLeafletで解決できない場合、オプションはポイントをGeoServer(または同様のもの)に配置して、スタイルがラベルを表示するWMSタイルレイヤーとしてロードすることです。この例青ラベルがこのように達成される
スティーブン鉛

@IvanSanchezうまくいきません。カスタムhtmlが通過していません。jsfiddle.net/maphew/q0refcwx/1での
マットウィルキー2017

回答:


11

permanentツールチップのオプションを使用するという@BradHardsの提案に従う実装は次のとおりです。このopacityオプションは、テキストコンテナーと背景コンテナーの両方を等しくフェードします。

var data_points = {
    "type": "FeatureCollection",
    "name": "test-points-short-named",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
    "features": [
    { "type": "Feature", "properties": { "name": "1" }, "geometry": { "type": "Point", "coordinates": [ -135.02507178240552, 60.672508785052223 ] } },
    { "type": "Feature", "properties": { "name": "6"}, "geometry": { "type": "Point", "coordinates": [ -135.02480935075292, 60.672888247036376 ] } },
    { "type": "Feature", "properties": { "name": "12"}, "geometry": { "type": "Point", "coordinates": [ -135.02449372349508, 60.672615176262731 ] } },
    { "type": "Feature", "properties": { "name": "25"}, "geometry": { "type": "Point", "coordinates": [ -135.0240752514004, 60.673313811878423 ] } }
    ]};

var pointLayer = L.geoJSON(null, {
  pointToLayer: function(feature,latlng){
    label = String(feature.properties.name) // Must convert to string, .bindTooltip can't use straight 'feature.properties.attribute'
    return new L.CircleMarker(latlng, {
      radius: 1,
    }).bindTooltip(label, {permanent: true, opacity: 0.7}).openTooltip();
    }
  });
pointLayer.addData(data_points);
mymap.addLayer(pointLayer);

スクリーンショット

完全に機能する例:https : //jsfiddle.net/maphew/gtdkxj8e/3/

ラベルの背景を削除するには

リーフレットツールチップスタイルのオーバーライドを参照してくださいLeaflet.jsマップで CSSを変更する方法とツールチップラベルの枠を完全に削除する方法の詳細 CSSを触れずに三角形のポインタを除去するために(単に追加direction: "center".bindTooltip!)

JavaScript:

.bindTooltip(label, {permanent: true, 
   direction: "center",
   className: "my-labels"}).openTooltip();

CSS:

.leaflet-tooltip.my-labels {
  background-color: transparent;
  border: transparent;
  box-shadow: none;
  }

スクリーンショット:コンテナグラフィックのないラベル

完全に機能する例:https : //jsfiddle.net/maphew/gtdkxj8e/7/


1
この方法をとる場合は、ツールチップのcssを変更するか、クラス名(ツールチップはdivoverlayから継承)をツールチップに追加して、背景色、境界線、影などを削除できます。.leaflet-tooltip {background-color: transparent;border: transparent;}
Diffusion_net

@Diffusion_netありがとうございます!これらのキーワードは、関連する質問とより完全な解決策(現在は回答に追加されています)に私を導きました。
マットウィルキー2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.