リーフレットマップのサイズ変更areaselect 2点の座標に基づいて

Question

私はリーフレットマップを使用しています。 私はselecAreaを使用しています。デフォルトで地図がロードされるときにはwidth:200, height:300ですが、NEコーナーとSWコーナーという2つのポイント座標で定義します。

var map = new L.Map('map', { 
    selectArea: true 
}); 

map.setView([14.378300, 24.904200], 5); 

var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
    maxZoom: 17, 
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
}); 
tileLayer.addTo(map); 

var areaSelect = L.areaSelect({width:200, height:300}); 
areaSelect.addTo(map); 

私は4つの入力ボックスにNEコーナー（緯度および経度）とSWコーナー（緯度および経度）があります。送信ボタンもあります。

クリックすると、これらのフィールドから値が取得され、それらの値に基づいてareaselectのサイズを変更したいとします。

私は地理座標

に基づいてareaselectのサイズを変更する方法がわからない、私はareaselectに渡したい私は、私はこのように行うことができますと思ったので、私は、生成された矩形とその境界：

$(".btn-resize-areaselect-by-points").click(function() { 
      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 bounds = L.rectangle([ [neLatCoord, neLonCoord], [swLatCoord, swLonCoord]]); 
      areaSelect.remove(); 
      areaSelect = L.areaSelect(bounds); 
      areaSelect.addTo(map); 
    }); 

しかし、それはうまくいかないのですか？誰かを助けることができる、どのように2点の座標に基づいてareaselectのサイズを変更する：NEコーナーとSWコーナー？

Answer 1

確かに可能です！ leaflet-areaselectのドキュメントに関しては、L.areaSelectオブジェクトインスタンスの引数は、Pixelのbyになければなりません。あなたがやっているのは、地理座標で矩形の境界を取得し、その座標でL.areaSelectオブジェクトを初期化しようとしています。しかし、それは動作しません！まず、地理座標をピクセル単位に変換し、L.areaSelect objectに渡す必要があります。 geogrを変換しています。点からのリーフレットの座標は、マップ方法latLngToLayerPoint()で行われます。それはあなたの他のquestion postのように同じです

var width = map.latLngToLayerPoint(bounds.getBounds().getNorthEast()).x- map.latLngToLayerPoint(bounds.getBounds().getSouthWest()).x  
var height = map.latLngToLayerPoint(bounds.getBounds().getNorthEast()).y- map.latLngToLayerPoint(bounds.getBounds().getSouthWest()).y 

var areaSelect = L.areaSelect({width:width, height:height }); 

：

この例では、それは次のようになります。