我用的是传单地图。我用的是selecArea。默认情况下,当地图加载时,它是width:200, height:300
,但我想用两个点坐标来定义它:东北角和西南角。
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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
tileLayer.addTo(map);
var areaSelect = L.areaSelect({width:200, height:300});
areaSelect.addTo(map);
我有四个输入框,其中两个点坐标:东北角(经度和长)和西南角(经度和长)。还有一个提交按钮。
点击,我从这些字段中获得值,我想根据这些来调整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);
});
但是这样,它不起作用吗?有人可以帮助,如何调整面积选择基于两点坐标:东北角和西南角?
当然有可能!关于leaflet-areaselect的文档,L.areaSelect
对象实例上的参数必须在Pixel中。您正在做的是检索地理坐标中的矩形边界,然后尝试用该坐标初始化L.areaSelect
对象。但这行不通!所以首先你必须将地理坐标转换为像素单位,然后将其传递给L.areaSelect object
。geogr转换。使用地图方法latLngToLayerPoint()
从一个点绘制单张中的坐标。
在这个例子中,它看起来像:
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 });