使用 "addfeature" 在多边形中加载孔

Question

我有一个地图编辑器，可以让用户绘制和修改多边形。可以在多边形内部绘制多边形以创建“孔”。

我面临的问题是在地图上绘制内部多边形并保存地图数据后——地图在页面刷新时变得混乱。即使 GeoJSON 正确，地图也不会显示原始形状。我怀疑 addfeature 事件没有正确处理内部和外部多边形。

如何修复 addfeature 以正确显示保存的地图数据？

预期输出：

实际输出：

更新：我试过了，它部分有效，但它切断了多边形数据。我加了一层看看原来的形状：

//When the data is loaded from the geojson it is processed here
map.data.addListener('addfeature', function(e) {
    //center map
    processPoints(e.feature.getGeometry(), bounds.extend, bounds);
    map.fitBounds(bounds);

    //check for polygon in case we do other shapes
    if (e.feature.getGeometry().getType() == "Polygon") {

        // lat/lng array
        let _map_d = []

        e.feature.getGeometry().forEachLatLng(function(latLngArry) {
            // populate array
            _map_d.push(latLngArry);
        });

        //Create a polygon with the lat long array
        let polygon = new google.maps.Polygon({
            map: map,
            paths: _map_d,
            fillColor: '#0099FF',
            fillOpacity: 0.7,
            strokeColor: '#AA2143',
            strokeWeight: 2
        });
        console.log("Added Polygon");

        /*
         * Debug to visualize where the rest of the shape data is
         */
        let poly = new google.maps.Polygon({
            path: e.feature.getGeometry().getAt(0).getArray(),
            strokeWeight: 1,
            map: map
        });
        console.log("Added debug overlay -- click to remove")


        //This layer is on top of the previous polygon so click it to remove
        google.maps.event.addListener(poly, 'click', function() {
            this.setMap(null);
        });

        google.maps.event.addListener(polygon, 'click', function() {
            setSelection(polygon)
        });

        all_overlays.push(polygon);
    }
});

Fiddle 片段：https://jsfiddle.net/dizzled/b1ste57L/

注意事项：画一个形状，然后在形状的内部画出“洞”。单击导出并重新加载页面以查看本地存储中的 geoJSON 数据。您可以使用 https://geojson.io/

验证 geoJSON 数据是否正确

Answer 1

当您在第一个 getGeometry() 上使用 forEachLatLng() 时，您会将所有 LatLng 添加到同一个数组中。例如我有这个 GEOJSON:

{
    "type":"FeatureCollection",
    "features": [
        {
            "type":"Feature",
            "geometry":{
                "type":"Polygon",
                "coordinates":[
                    [
                        [-113.2140804426134,42.406463321445244],
                        [-112.9504085676134,34.83098366669799],
                        [-99.2834163801134,34.06999699181644],
                        [-99.1515804426134,42.50373270999573],
                        [-113.2140804426134,42.406463321445244]
                    ],[
                        [-102.3156429426134,40.763110054579435],
                        [-102.3156429426134,36.36738072363568],
                        [-109.7863460676134,37.421696297537714],
                        [-109.3908382551134,40.763110054579435],
                        [-102.3156429426134,40.763110054579435]
                    ]
                ]
            },
            "properties":{}
        }
    ]
}

您当前的代码正在构建点数组：

                    [
                        [-113.2140804426134,42.406463321445244],
                        [-112.9504085676134,34.83098366669799],
                        [-99.2834163801134,34.06999699181644],
                        [-99.1515804426134,42.50373270999573],
                        [-113.2140804426134,42.406463321445244]
                        [-102.3156429426134,40.763110054579435],
                        [-102.3156429426134,36.36738072363568],
                        [-109.7863460676134,37.421696297537714],
                        [-109.3908382551134,40.763110054579435],
                        [-102.3156429426134,40.763110054579435]
                    ]

这为您提供了一个包含一些内容的多边形。当你使用 getGeometry() 并进入其中的数组时（可能想检查一些安全的东西）你将构建正确的 [][] 可以传递到 map.Polygon():

            // lat/lng array
            let _map_d = [];
                        
            // Need to loop through the Array within the Geometry
            e.feature.getGeometry().getArray().forEach(function(latLngArry) {               
                    // And add each of those LatLng to the appropriate array
                    let currPoly = [];
                    latLngArry.forEachLatLng(function(latLng) {
                    currPoly.push(latLng);
                })
                _map_d.push(currPoly);
            });

结果

_map_d 
(2) [Array(4), Array(4)]
0: (4) [_.J, _.J, _.J, _.J]
1: (4) [_.J, _.J, _.J, _.J]
length: 2
__proto__: Array(0)

使用 "addfeature" 在多边形中加载孔

Loading holes in polygons with "addfeature"

javascript

google-maps

google-maps-api-3