javascript - 检查多边形是否在视口(viewport)中

Question

我有 250 个多边形，每个多边形有 100-300 个点。 如何检查视口(viewport)中有哪些多边形？

合乎逻辑的做法是检查每个多边形的每个点是否在视口(viewport)中，但这看起来非常昂贵和愚蠢。 我还有其他选择吗？如果有，有哪些选择？

我的其他想法:

• 使用边界框 - 缺点是它只有 4 个点，可能会产生漏报
• 用更少的点制作不可见的简化多边形 - 太多的额外工作、数据、资源使用

---

以下代码遍历所有 250 个多边形和每个多边形的 100-300 个点，并在视口(viewport)中检查它。我认为自己是编程的初学者，但这似乎不是一个好主意，特别是如果每​​次更改边界/拖动 map 时我都需要它。

google.maps.event.addListener( map, 'bounds_changed', function( ) {

    var viewport = map.getBounds();

    var polygons = [array of polygons];
    var polygonsCount = polygons.length;

    // Polygons
    for(a = 0; a < polygonsCount; a++) {

        var polygonPoints = polygons[a].getPath(); // Array of points
        var inBounds = false;

        var pointsCount = polygonPoints.length;

        // Points
        for(b = 0; b < pointsCount; b++) {

            if(viewport.contains(polygonPoints[b])) { 

                inBounds = true; 
                return false;  // No need to continue loop if we found one 
            } 
        } 
    }
});

Answer 1

您可以使用以下函数来确定多边形是否位于 map 视口(viewport)内:

function containsPolygon(map,polygon) {
    return polygon.getPaths().getArray().every(function (path) {
        return path.getArray().every(function(coord) {
            return map.getBounds().contains(coord);
        });
    });
}

示例

var g_polygongs = [];
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 3,
        center: { lat: 24.886, lng: -70.268 },
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    //generate polygons
    for (var i = 0; i < 100; i++) {
        var startLng = getRandomArbitrary(-90.0, 0.0);
        var startLat = getRandomArbitrary(0.0, 60.0);
        var coords = [
            { lat: startLat, lng: startLng },
            { lat: startLat - 6.0, lng: startLng + 4.0 },
            { lat: startLat + 6.0, lng: startLng + 8.0 },
            { lat: startLat, lng: startLng }
        ];
        g_polygongs.push(createPolygon(map,coords));
    }


    google.maps.event.addListener(map, 'bounds_changed', function () {

      g_polygongs.forEach(function(p) {
          if (containsPolygon(map, p)) {
              p.setOptions({ strokeWeight: 2.0, fillColor: 'green' });
          } else {
              p.setOptions({ fillColor: 'orange' });
          }

      });
    });

}


function containsPolygon(map,polygon) {
    return polygon.getPaths().getArray().every(function (path) {
        return path.getArray().every(function(coord) {
            return map.getBounds().contains(coord);
        });
    });
}





function createPolygon(map,coords) {
    // Construct the polygon.
    var poly = new google.maps.Polygon({
        paths: coords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });
    poly.setMap(map);
    return poly;
}


function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    height: 100%;
}

<div id="map"></div>
<script async defer
            src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

JSFiddle