获取矩形宽度和高度传单jquery

Get rectangle width and height leaflet jquery

本文关键字：高度 jquery 获取      更新时间：2023-09-26

我有一个地图和一个区域选择字段:

// initialize map
var map = L.map('map').setView([38, 0], 2);
L.tileLayer('http://{s}.tile.cloudmade.com/70146506bc514228adc1756788c730d3/997/256/{z}/{x}/{y}.png', {attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, Imagery &copy; <a href="http://cloudmade.com">CloudMade</a>', maxZoom: 18}).addTo(map);
var areaSelect = L.areaSelect({
    width:100, 
    height:150, 
    keepAspectRatio:true
});
areaSelect.addTo(map);
areaSelect.setDimensions({width: 50, height: 50});

想要得到矩形的宽度和高度。

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 rectangle =  L.rectangle([  [neLatCoord, neLonCoord], [swLatCoord, swLonCoord]]).addTo(map);

现在我想要得到矩形的宽度和高度这样我就可以设置区域的尺寸了像这样选择

var rectangleWidth = rectangle.getBounds().getEast() - rectangle.getBounds().getWest();
var rectangleHeight = rectangle.getBounds().getNorth() - rectangle.getBounds().getSouth();
areaSelect.setDimensions({width: rectangleWidth, height: rectangleHeight});

但是这给了另一个宽度和高度?我不知道为什么?

有人能帮帮我吗，因为我被卡在这上面了?

这是我的JS提琴

编辑:

如果我用矩形代替区域选择:

var rectangle = L.rectangle([  [21.616579,  29.487305], [7.798079, 20.522461]]);
map.addLayer(rectangle);
rectangle.editing.enable();
// Every time we move the selected rectangle, refresh data about the selected area.
rectangle.on('edit', function() { 
    selectedBounds = this.getBounds();
    console.log("Area:", selectedBounds);
    //some other code
});
$( ".select" ).click(function() {
    rectangle.editing.disable();    
    map.removeLayer(rectangle);
    rectangle =  new L.rectangle([  [17.853290, 34.980469], [10.876465, 14.853516]]);
    map.addLayer(rectangle);
    rectangle.editing.enable();
});

当我点击重置时，事件rectangle.on('edit', function() { ...不工作?我不知道为什么?

与处于leaflet-areaselect状态的文档一样，方法.setDimensions()需要参数为Pixel，并且您以地理坐标提供参数。与传单地图方法.latLngToLayerPoint()，你能够转换地理。将坐标扩展到地图的像素。

修改

var rectangleWidth = rectangle.getBounds().getEast() - rectangle.getBounds().getWest();
var rectangleHeight = rectangle.getBounds().getNorth() - rectangle.getBounds().getSouth();

到

  var rectangleWidth = map.latLngToLayerPoint(rectangle.getBounds().getNorthEast()).x- map.latLngToLayerPoint(rectangle.getBounds().getSouthWest()).x    
  var rectangleHeight = map.latLngToLayerPoint(rectangle.getBounds().getNorthEast()).y- map.latLngToLayerPoint(rectangle.getBounds().getSouthWest()).y

这里是工作的JS FIDDLE

我知道这个帖子已经有一年了，但我想别人可能会从我提供的答案中受益。

传单实际上提供了2种转换方法:

  • latLngToLayerPoint ()
  • latLngToContainerPoint ()

两者之间的区别与如何计算x,y位置有关。

LayerPoint在初始化地图时查找相对于左上角的x,y位置!!(缩放会重置这个原点，但平移不会!)

ContainerPoint查找相对于映射容器本身左上角的x,y位置。

为什么这很重要?

如果你初始化你的地图，平移它，然后使用latLngToLayerPoint()获得x,y坐标，你可能会得到负的x/y值，这可能导致负的宽度/高度，如果你不主动补偿他们。

至少在我的用例中，在确定边界高度/宽度时，最好使用latLngToContainerPoint()。

除此之外，上面的答案对我来说非常有效!: D

相关文章：