私はマップとエリア選択フィールドを持つ長方形の幅と高さのリーフレットjqueryの

Question

を取得：

// initialize map 
var map = L.map('map').setView([38, 0], 2); 
L.tileLayer('http://{s}.tile.cloudmade.com/70146506bc514228adc1756788c730d3/997/256/{z}/{x}/{y}.png', {attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, Imagery &copy; <a href="http://cloudmade.com">CloudMade</a>', maxZoom: 18}).addTo(map); 

var areaSelect = L.areaSelect({ 
    width:100, 
    height:150, 
    keepAspectRatio:true 
}); 
areaSelect.addTo(map); 
areaSelect.setDimensions({width: 50, height: 50}); 

は、長方形の幅と高さを取得したいです。

var rectangleWidth = rectangle.getBounds().getEast() - rectangle.getBounds().getWest(); 
var rectangleHeight = rectangle.getBounds().getNorth() - rectangle.getBounds().getSouth(); 
areaSelect.setDimensions({width: rectangleWidth, height: rectangleHeight}); 

が、これは別の幅と高さを与える：

var neLatCoord = $('#ne-lat-coordinate').val(); 
     var neLonCoord = $('#ne-lon-coordinate').val(); 
     var swLatCoord = $('#sw-lat-coordinate').val(); 
     var swLonCoord = $('#sw-lon-coordinate').val(); 
     var rectangle = L.rectangle([ [neLatCoord, neLonCoord], [swLatCoord, swLonCoord]]).addTo(map); 

は、だから今、私はこのように選択した領域の大きさを設定することができるように長方形の幅と高さを取得したいですか？どうしてか分かりません？

誰かが私を助けてくれますか？私はこれに固執していますか？

私が代わりに面積の矩形を使用している場合は、選択します：私はクリックでこのリセットを行うと、イベントrectangle.on('edit', function() { ...が動作していない

var rectangle = L.rectangle([ [21.616579, 29.487305], [7.798079, 20.522461]]); 
map.addLayer(rectangle); 

rectangle.editing.enable(); 

// Every time we move the selected rectangle, refresh data about the selected area. 
rectangle.on('edit', function() { 

    selectedBounds = this.getBounds(); 
    console.log("Area:", selectedBounds); 
    //some other code 
}); 

$(".select").click(function() { 
    rectangle.editing.disable();  
    map.removeLayer(rectangle); 
    rectangle = new L.rectangle([ [17.853290, 34.980469], [10.876465, 14.853516]]); 
    map.addLayer(rectangle); 
    rectangle.editing.enable(); 
}); 

は、ここに私のJS FIDDLE

EDITですか？どうしてか分かりません？

Answer 1

リーフレットのareaselect状態のdocsと同様に、.setDimensions()メソッドはPixelとして引数を必要とし、引数は地理座標で指定します。 leaflet map method.latLngToLayerPoint()では、geogrを変換することができます。あなたのマップのPixelへの座標が拡張されます。ただ、ここで

var rectangleWidth = map.latLngToLayerPoint(rectangle.getBounds().getNorthEast()).x- map.latLngToLayerPoint(rectangle.getBounds().getSouthWest()).x  
    var rectangleHeight = map.latLngToLayerPoint(rectangle.getBounds().getNorthEast()).y- map.latLngToLayerPoint(rectangle.getBounds().getSouthWest()).y 

に

var rectangleWidth = rectangle.getBounds().getEast() - rectangle.getBounds().getWest(); 
var rectangleHeight = rectangle.getBounds().getNorth() - rectangle.getBounds().getSouth(); 

を変更

は、私はこのスレッドがおよそ歳ですけど、私は他の誰かが私の悩みの恩恵を受けるかもしれない考え出し作業JS FIDDLE

Answer 2

です提供された答えで

リーフレット実際2つの変換方法を提供：

• latLngToLayerPointを（）
• latLngToContainerPoint（）

両者の違いは、x、yの位置が計算される方法に関係しています。

LayerPointマップされたx、yの位置は、マップの左上隅であるが初期化されたときに発生します。（この原点リセットをズームが、パンニングはない！）の左上隅を基準

ContainerPoint発見のX、Y位置マップ・コンテナ自体。

なぜ重要ですか？

あなたのマップを初期化する場合は、それをパンして、そうでない場合は、latLngToLayerPoint（）を使用してyのcoordsのは、あなたが潜在的に負のマイナス幅につながる可能性のx/yの値、/高さを得ることができ、Xを得ます積極的にそれらを補う。

少なくとも私の使用の場合は、境界の高さ/幅をピクセル単位で決定するときは、latLngToContainerPoint（）を使用する方が良いことがありました。

それ以外は、上記の答えは私にとっては完璧でした！ ：D