2

この質問は Leaflet ユーザー (および Leaflet.draw プラグインを使用するユーザー) を対象としています...

私は Leaflet を使用しており、ユーザーがマップの任意の領域に 1 つだけの単一のポリゴンを描画できるようにしたいと考えています。また、そのポリゴンのサイズを何らかの方法で制限したいと思います（正方形の辺の長さを制限する、またはそれがカバーする領域を制限するなど）-設定されたサイズ制限がズームに関係なく変換されるように、できれば度で指定しますレベル）。

私の最終目標は、4 つの正方形の頂点の座標またはポリゴン領域でカバーされる座標を抽出することです。

そうは言っても、Leaflet.Draw プラグインを見つけました。これは素晴らしいことですが、その機能を自分の要件に制限する必要があります (一度に描画されるポリゴンは 1 つだけで、特に、サイズを大きくしすぎることはできません)。これは可能ですか？もしそうなら、どのように？

可能かどうかに関係なく、これを行うためのより良い方法はありますか?

4

3 に答える 3

5

この問題の別の解決策を提案できますか?

次のようにして、ポリゴンの数を 1 つに制限します。

 map.on('draw:created', function (e) {
    var layer = e.layer;
    if(drawnItems && drawnItems.getLayers().length!==0){
      drawnItems.clearLayers();
    }           
    drawnItems.addLayer(layer);     
 });

draw:created イベントをリッスンして、既にマーカーがあるかどうかを判断します。ある場合は、そのマーカーを削除し、新しいマーカーを目的の場所に配置します。したがって、ユーザーは以前のマーカー ルールを削除する必要がなくなり、常に 1 つのマーカー ルールが適用されるため、クリックが 1 回少なくなります。

複数のマーカーを許可したい場合は、最も古いレイヤーの FIFO 削除を行うことができます。

レイヤーを自動的に削除したくない場合は、ユーザーにプロンプ​​トを表示するか、要求を無視することができます。

于 2014-10-20T14:42:37.810 に答える
0

Leaflet Draw のソースをハッキングせずに実行しました。

コントロールをマップに追加したら、コントロール内に非表示の div を配置します。次に、ポリゴンが作成されたら、その div を表示します。CSS を使用してコントロールの上に絶対配置し、ボタンを「無効」にし、CSS を使用してボタンをフェードさせました。ポリゴンが削除された場合、その div を非表示にします。

最善の解決策ではありませんが、ソースを編集しなくても動作します。

drawControl を追加した後、非表示の div を追加します。

$('.leaflet-draw-section:first').append('<div class="leaflet-draw-inner-toolbar" title="Polygon already added"></div>');

それらを切り替えるJSは次のとおりです。

map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

    // keep the polygon on the map
    drawnItems.addLayer(layer);

    // disable the create polygon tools
    $('.leaflet-draw-inner-toolbar').show();
});

map.on('draw:deleted', function(e) {
    // enable the create polygon tools
    $('.leaflet-draw-inner-toolbar').hide();
});

CSSは次のとおりです。

.leaflet-draw-inner-toolbar {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
    bottom: 0;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
于 2013-11-08T20:52:57.977 に答える