Question

我使用传单地图。我使用的是selecArea。默认情况下，加载地图时它是width:200, height:300，但我想用两个点坐标定义它：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);

我有四个输入框，其中有两个点坐标：NE角（lat和long）和SW角（lat和long）。还有一个提交按钮。

点击后，我会从这些字段中获取值，并希望根据这些字段调整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);
    });

但是那样，它不起作用？有人可以帮忙，如何基于两个点坐标来调整大小：NE角和SW角？

Answer 1

当然可以！关于leaflet-areaselect的文档，L.areaSelect对象实例的参数必须在Pixel中。您正在做的是在地理坐标中检索rectange的边界，然后尝试使用该坐标初始化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 });

与您的其他question post相同。

小叶贴图基于两点坐标调整大小

1 个答案: