2016-09-07 5 views
5

ズームを変更したときに縮尺変更されていないテキストをマップに追加して元のサイズのままにしたいとします。リーフレットにテキストを固定することはできますか?

私はこのコード(ジャバスクリプト)を使用:

var text = new L.marker(rect.getBounds().getSouthWest(), {opacity: 0.0001}); 
text.bindLabel("TEXT", styleProperties); 
text.addTo(myLayer); 

をこの望ましくない結果を得る: enter image description here

Iズームが適用されるときにテキストが左側の第1の画像のサイズのままである必要が。出来ますか?

編集:テキストは地図と一緒に移動しますが、ズームするとサイズが変わらない都市の名前のようにする必要があります(はい、都市の名前が画像であることを知っています。 答えはありがたいですが、今のところ私はlabesを維持しています。優雅なソリューションではなく動作します。

答えて

0

L.DivIconのマーカーを使用してください。

+0

ありがとうございますが、ズームしたときと同じ効果があります。 私はこの例を見つけました:http://jsfiddle.net/erictheise/UaDDv/ –

0

Leaflet.labelプラグインを使用することができます(リーフレット1.0から、L.LabelがリーフレットコアにL.Tooltipとして追加されます)。あなたは自分のCSSでそれをスタイルすることができます。 exampleを参照してください。

+0

このプラグインを使用しています(2行目でbindLabel関数を見ることができます)。問題は、ズーム時にラベルのテキストが拡大縮小されることです。 マップに追加されたテキストは、同じ固定サイズのままにしておきたいと思います(最初の図の左側を参照)。 "地図上に燃えた"。 –

0

あなたのテキストは実際にマップに関連していないようです。 地図のコンテナ上の別のdivのテキストを追加するとどうなりますか?

<div> 
    <div id="map" style="width: 600px; height: 400px"></div> 
    <div style="pointer-events: none; position: absolute; top: 100px; left: 100px">foo bar</div> 
    </div> 

here

+0

ありがとうございますが、私が欲しいものはありません。都市の名前のように、テキストは地図とともに移動する必要があります。 –

0

私の知る限り理解し、完全な例を参照してください、あなたはズームレベルに応じて動的にフォントサイズをしたいです。ちょうどあなたが言及した反対です。

ズームレベルに応じてフォントサイズを変更できます。 Leaflet.Labelプラグインの場合、ズームのイベントハンドラを追加して、ラベルのフォントサイズやラベルの他のスタイルで再生することができます。

Leaflet.Labelのない別の例があります。これはパスオブジェクトの隣にテキスト要素を追加します。テキストはSVGに埋め込まれており、ズームレベルに応じてフォントサイズを変更します。私はより良い機能を見つけることができませんでしたが。

https://embed.plnkr.co/hU6ip8T58tvE7CHJwniR/

関連する問題