Javascript 使用“加载多边形中的孔”；addfeature“；

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

我面临的问题是，在地图上绘制多边形内部并保存地图数据后，地图在页面刷新时会被损坏。即使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);
    }
});

小提琴片段：

---

注：画一个形状，然后在形状内部画“孔”。单击导出并重新加载页面以查看localstorage中的geoJSON数据。当您在第一个

getGeometry（）

上使用

forEachLatLng（）

将所有

LatLng

添加到同一数组时，可以使用验证geoJSON数据是否正确。例如，我有一个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（）

：

导致

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

---

这回答了你的问题吗@Abronsius教授不，我已经在用代码洞画得很好了。当重新加载数据时，addfeature函数无法绘制漏洞。当尝试运行您的小提琴时，我得到以下信息：

ExpiredKeyMapError

错误：

[“谷歌地图JavaScript API错误：ExpiredKeyMapError”https://developers.google.com/maps/documentation/javascript/error-messages#expired-键映射错误“]

谢谢@brandonmconnell我修复了api密钥问题

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