Question

我有很多复杂的多边形，有750多个点。 是否有一种快速有效的方法来获取边界框？我不想循环遍历每一点并扩展边界框..

解决方案应该在javascript中，或者我可能错过了Google Maps API v3功能。

或者我应该对边界框的坐标进行硬编码并使用它们来减少客户端的负载？

如何制作多边形：

//Coordinates
var coordinates = [ 
    new google.maps.LatLng(11,22),
    new google.maps.LatLng(11,22),
    new google.maps.LatLng(11,22),

    //etc up to 200, 500 or even 800 points
]

//Options
var options = {
    path: coordinates,
    strokeColor: "#222",
    strokeOpacity: 1,
    strokeWeight: 2,
    fillColor: "#000",
    fillOpacity: 0,
    zIndex: 0
}

//Create polygon
var polygon = new google.maps.Polygon( options );

//Show it on map
polygon.setMap( map );

我需要做我的作业，因为实时计算被排除在外。我可能需要以艰难的方式去做，但也许你们中的一些人知道一些方便的在线工具，根据插入的坐标计算边界框？

我需要尽可能简单的形状，因为我需要检查我的多边形是否在视口中，它可能是800点的噩梦，因为除了循环遍历所有点之外我不知道任何其他方式。

Answer 1

Polygon在Google Maps API v3上没有方法getBounds。您可以手动实现它。但它包含了fors。顺便说说。我已经实现了getBounds方法。这是一个硬编码版本。 demo的链接。

<强>更新

要获取多个多边形的单边框，请使用union方法的getBounds方法。

var coordinates = [ 
   new google.maps.LatLng(10,15),
   new google.maps.LatLng(12,16),
   new google.maps.LatLng(11,18),
   new google.maps.LatLng(11,19),
   new google.maps.LatLng(13,21),
   new google.maps.LatLng(12,22),
   new google.maps.LatLng(13,24),
   new google.maps.LatLng(11,25),
   new google.maps.LatLng(8,23),
   new google.maps.LatLng(7,23),
   new google.maps.LatLng(8,21),
   new google.maps.LatLng(6,17),
   new google.maps.LatLng(9,16)
]

var coordinates_1 = [ 
   new google.maps.LatLng(15,28),
   new google.maps.LatLng(16,30),
   new google.maps.LatLng(17,30),
   new google.maps.LatLng(16,31),
   new google.maps.LatLng(16,32),
   new google.maps.LatLng(14,29),
]

var options = {
   path: coordinates,
   strokeColor: "#222",
   strokeOpacity: 1,
   strokeWeight: 2,
   fillColor: "#000",
   fillOpacity: 0,
   zIndex: 0,
   map: map
}

var options_1 = {
   path: coordinates_1,
   strokeColor: "#222",
   strokeOpacity: 1,
   strokeWeight: 2,
   fillColor: "#000",
   fillOpacity: 0,
   zIndex: 0
}

var polygon = new google.maps.Polygon(options);
var polygon_1 = new google.maps.Polygon(options_1);

if(!google.maps.Polygon.prototype.getBounds)
google.maps.Polygon.prototype.getBounds = function() {
    var bounds = new google.maps.LatLngBounds();
    var paths = this.getPaths();    
    for (var i = 0; i < paths.getLength(); i++) {
        var path = paths.getAt(i);
        for (var j = 0; j < path.getLength(); j++) {
            bounds.extend(path.getAt(j));
        }
    }
    return bounds;
}

var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: polygon.getBounds()
  });

var rectangle_1 = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: polygon_1.getBounds()
  });

var rectangle_single = new google.maps.Rectangle({
    strokeColor: '#FFC000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFF000',
    fillOpacity: 0.35,
    map: map,
    bounds: polygon.getBounds().union(polygon_1.getBounds())
  });

Answer 2

更简单，更紧凑的代码版本是：

    google.maps.Polygon.prototype.getBounds = function() {
        var bounds = new google.maps.LatLngBounds();
        this.getPath().forEach(function(element,index){ bounds.extend(element); });
        return bounds;
    }

Answer 3

数组中的X和Y坐标，然后是x和y数组min和max。虽然我们需要更多的图片才能知道你究竟想要什么以及如何。

Answer 4

如果给出了点，我们没有先验结构，那么没有比迭代点和扩展边界框更有效的方式。由于您事先不知道任何事情，任何点都可以是角点（或边缘点），因此您必须将其考虑在内。没有算法可以更有效地做到这一点。

但是，如果您可以控制提供坐标的服务器，则可以将这些点预先存储在数据结构中，如 k-d tree 。比如说所有的点都是静态的，你可以将它们存储在这样的kd树中，然后你可以快速加速（尽管据我所知，问题仍然是 O（n），但你不必考虑所有的积分。）

但问题是您没有提供有关服务器端的任何信息。

获取多边形的边界框

4 个答案: