为什么是多边形；“洞”；谷歌地图JavaScript API的阴影？_Javascript_Google Maps_Google Maps Api 3_Geojson

为什么是多边形；“洞”；谷歌地图JavaScript API的阴影？

javascript google-maps google-maps-api-3

为什么是多边形；“洞”；谷歌地图JavaScript API的阴影？,javascript,google-maps,google-maps-api-3,geojson,Javascript,Google Maps,Google Maps Api 3,Geojson,我一直在通过GeoJSON和GoogleMapsJavaScriptAPI绘制复杂的多重多边形，偶尔我会注意到一些“洞”被遮住了。我怀疑我的代码产生了一些格式不正确的GeoJSON（例如，具有相同缠绕方向的外环和内环），因此我尝试将形状简化为单个多边形并删除几乎所有顶点：结果如下所示我看不出GeoJSON有什么问题，但洞的着色颜色与多边形的其余部分相同。我已经在macOS上的Chrome和Firefox以及Windows上的Chrome上进行了测试我认为（尽管我的眼睛/记忆可能在玩把戏），这

我一直在通过GeoJSON和GoogleMapsJavaScriptAPI绘制复杂的多重多边形，偶尔我会注意到一些“洞”被遮住了。我怀疑我的代码产生了一些格式不正确的GeoJSON（例如，具有相同缠绕方向的外环和内环），因此我尝试将形状简化为单个多边形并删除几乎所有顶点：结果如下所示

我看不出GeoJSON有什么问题，但洞的着色颜色与多边形的其余部分相同。我已经在macOS上的Chrome和Firefox以及Windows上的Chrome上进行了测试

我认为（尽管我的眼睛/记忆可能在玩把戏），这个问题是间歇性的，也就是说，如果我刷新贴图，洞有时会正确渲染。然而，我现在不能复制这个

有人能看到我哪里出了问题，或者有人在谷歌地图上遇到过这样的错误吗

let映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（“map”）{
缩放：6，
中心：{
拉脱维亚：47，
液化天然气：-120
},
});
map.data.addGeoJson({
“类型”：“FeatureCollection”，
“特点”：[{
“类型”：“功能”，
“几何学”：{
“类型”：“多边形”，
“坐标”：[
[
[-124.125, 46.125],
[-124.125, 45.125],
[-119.875, 46.625],
[-119.875, 48.875],
[-124.125, 48.875],
[-124.125, 46.125]
],
[
[-122.375, 47.125],
[-122.375, 46.875],
[-122.625, 46.875],
[-122.625, 47.125],
[-122.375, 47.125]
]
]
}
}]
});
}

#地图{
身高：100%；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}


数据层：简单

外部多边形的缠绕方向错误

相关问题：

反转外部多边形坐标的顺序可以使孔工作。更改：

  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [-124.125, 46.125],
        [-124.125, 45.125],
        [-119.875, 46.625],
        [-119.875, 48.875],
        [-124.125, 48.875],
        [-124.125, 46.125]
      ],

致：

显示了这个洞

let映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（“map”）{
缩放：6，
中心：{
拉脱维亚：47，
液化天然气：-120
},
});
map.data.addGeoJson({
“类型”：“FeatureCollection”，
“特点”：[{
“类型”：“功能”，
“几何学”：{
“类型”：“多边形”，
“坐标”：[
[//多边形
[-124.125, 46.125],
[-124.125, 48.875],            
[-119.875, 48.875],
[-119.875, 46.625],
[-124.125, 45.125],            
[-124.125, 46.125]
],
[//洞
[-122.375, 47.125],
[-122.375, 46.875],
[-122.625, 46.875],
[-122.625, 47.125],
[-122.375, 47.125]
]
]
}
}]
});
}

#地图{
身高：100%；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}


数据层：简单

谢谢！但是你的代码不是同时有外环和内环顺时针缠绕吗？GeoJSON规范称“外环为逆时针方向，孔为顺时针方向”。Google Maps文档提出了稍微弱一点的要求，“…形成内部路径的点与外部路径的点缠绕在相反的方向上，以形成孔。”我认为您的工作代码违反了这些要求，而我的代码符合这些要求。我认为这意味着谷歌地图中有一个bug，除非我遗漏了一些东西。无论哪种方式，内部漏洞似乎都有效（至少目前是这样）。我对发布的代码做了最小的修改来显示这个洞。我想说这是Google Maps Javascript API v3解析GeoJSON的一个错误，弹出一个警告：

多边形和多多边形应该遵循右手规则。看起来您已经报告了：。可能相关的问题：不确定原因，但如果删除或稍微移动外部多边形中的第二个点，它也会起作用，（我从示例中导出了GeoJson:，它是有效的。）GeoJSonLink是一个看起来很酷的工具-感谢您让我注意到它。我已经看到，在处理更复杂的多边形时，删除一些点修复了这个问题，所以它看起来真的像谷歌地图中的一个真正的bug。如果我能弄清楚谷歌地图到底有什么困扰，那么我就有可能设计出一个解决方案。。。谢谢你在这方面的帮助-很多值得思考的东西。谢谢！但是你的代码不是同时有外环和内环顺时针缠绕吗？GeoJSON规范称“外环为逆时针方向，孔为顺时针方向”。谷歌M