传单地图根据两点坐标调整选区大小

leaflet map resize areaselect based on two point coordinates

本文关键字：调整 坐标 两点 选区 单地图 地图      更新时间：2023-09-26

我用的是传单地图。我用的是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: '&copy; <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 });
相关文章：