为什么 Google Maps JavaScript API 会遮盖多边形“洞”？答案

【问题标题】：Why is polygon "hole" being shaded in by Google Maps JavaScript API?为什么 Google Maps JavaScript API 会遮盖多边形“洞”？
【发布时间】：2020-10-19 16:32:39
【问题描述】：

我一直在使用 Google Maps JavaScript API 通过 GeoJSON 绘制复杂的多面体，偶尔我注意到一些“洞”被遮住了。我怀疑我的代码生成了一些格式不正确的 GeoJSON（例如，具有相同绕组的外环和内环方向）所以我尝试通过将其缩小为单个多边形并删除几乎所有顶点来简化形状：结果如下所示。

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

我认为（尽管我的眼睛/记忆可能在耍花招）这个问题是间歇性的，即如果我刷新地图，洞有时会正确渲染。但是，我现在无法重现。

谁能看到我哪里出错了，或者以前有没有人在 Google 地图中遇到过这样的错误？

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: {
      lat: 47,
      lng: -120
    },
  });
  map.data.addGeoJson({
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "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]
          ],
          [
            [-122.375, 47.125],
            [-122.375, 46.875],
            [-122.625, 46.875],
            [-122.625, 47.125],
            [-122.375, 47.125]
          ]
        ]

      }
    }]
  });
}

#map {
  height: 100%;
}

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

<!DOCTYPE html>
<html>

<head>
  <title>Data Layer: Simple</title>
  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=&v=weekly&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" defer></script>
</head>

<body>
  <div id="map"></div>
</body>

</html>

【问题讨论】：

标签： javascript google-maps google-maps-api-3 geojson

【解决方案1】：

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

反转外部多边形坐标的顺序使孔起作用。改变：

  "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]
      ],

收件人：


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

显示洞。

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: {
      lat: 47,
      lng: -120
    },
  });
  map.data.addGeoJson({
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [ // polygon
            [-124.125, 46.125],
            [-124.125, 48.875],            
            [-119.875, 48.875],
            [-119.875, 46.625],
            [-124.125, 45.125],            
            [-124.125, 46.125]
          ],
          [ // hole
            [-122.375, 47.125],
            [-122.375, 46.875],
            [-122.625, 46.875],
            [-122.625, 47.125],
            [-122.375, 47.125]
          ]
        ]

      }
    }]
  });
}

#map {
  height: 100%;
}

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

<!DOCTYPE html>
<html>

<head>
  <title>Data Layer: Simple</title>
  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=&v=3.40&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" defer></script>
</head>

<body>
  <div id="map"></div>
</body>

</html>

【讨论】：

谢谢！但是你的代码不是同时有外环和内环顺时针缠绕吗？ GeoJSON 规范说“外环是逆时针的，孔是顺时针的”。谷歌地图文档提出了一个稍微弱一点的要求，即“......形成内部路径的点与外部路径中的点的缠绕方向相反，以形成洞。”我认为您的工作代码违反了这些要求，而我的代码是合规的。我认为这意味着 Google 地图中存在错误，除非我遗漏了什么
内孔似乎可以用任何一种方式工作（至少目前是这样）。我对发布的代码进行了最小的更改以显示漏洞。
我会说这是 Google Maps Javascript API v3 解析 GeoJSON 的方式中的一个错误，geojsonlint.com 会弹出一个警告：Polygons and MultiPolygons should follow the right-hand rule。看起来您已经报告了它：issue。可能相关问题：RFC 7946 GeoJSON non-compliance
不知道为什么，但是如果您删除或稍微移动外部多边形中的第二个点，它也可以工作。 fiddle/slightly moved，fiddle/removed（我从示例中导出了 GeoJson：developers.google.com/maps/documentation/javascript/examples/…，它对 geojsonlint.com 有效）。
geojsonlint 是一个看起来很酷的工具 - 感谢您引起我的注意。我已经看到在处理更复杂的多边形时删除一些点可以解决问题，所以它看起来真的像谷歌地图中的一个实际错误。如果我能弄清楚谷歌地图特别困扰什么，那么我可能会设计一个解决方法......感谢您对此的帮助 - 很多值得思考的东西。