리플 렛지도 크기 조정 areaselect 두 지점 좌표를 기반으로

Question

나는 전단지를 사용하고 있습니다. 나는 selecArea를 사용하고 있습니다. 기본적으로지도가로드되면 width:200, height:300이지만 NE 코너와 SW 코너의 두 지점 좌표로 정의하고 싶습니다. NE 코너 (위도 길이) (위도 및 긴) 및 SW 코너 :

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); 

I는 네 개의 점의 좌표 입력 상자있다. 제출 버튼도 있습니다.

클릭 할 때 해당 필드의 값을 얻었으므로 그 값을 기준으로의 크기를 조정하고 싶습니다.

나는 지리적 좌표 내가 이렇게 할 수 있다고 생각

에 따라 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); 
    }); 

하지만 그런 식으로 작동하지 않습니까? 누군가가 도울 수있는 방법, 두 지점 좌표를 기반으로 areaselect 크기를 조정하는 방법 : 네브라스카 코너와 SW 코너?

Answer 1

물론 가능합니다. leaflet-areaselect의 문서와 관련하여 L.areaSelect 개체 인스턴스의 인수는 Pixel의 by를 사용해야합니다. 당신이하고있는 일은 지리적 좌표에서 rectange의 경계를 검색 한 다음 해당 좌표로 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 }); 

: 같은

이 예에서는 볼 수 있었다.