谷歌地图多边形与外部地图着色

Question

首先，对于你将要阅读的问题，我使用了以下代码片段来突出显示我的多边形:高亮多边形和使用谷歌地图着色地图的其余部分

这是我的代码(它是Angular):

var boundaries          = [];
// big area
var overlay             = [
  new $rootScope.googleApi.LatLng(80.0, -90.0),
  new $rootScope.googleApi.LatLng(-60.0, -90.0),
  new $rootScope.googleApi.LatLng(-60.0, 90.0),
  new $rootScope.googleApi.LatLng(80.0, 90.0)
];
// my polygon
angular.forEach(settings_boundaries, function(val, key) {
  boundaries.push(new $rootScope.googleApi.LatLng(val[1], val[0]));
});
// create a polygon with overlay first
var poly = new $rootScope.googleApi.Polygon({
  paths: [overlay, boundaries],
  strokeColor: "blue",
  strokeWeight: "1",
  fillColor: "black",
  fillOpacity: 0.4,
  clickable: false
});
poly.setMap(interactiveMap);

现在，真正的问题是如果我使用这些坐标(我不记得一开始是怎么得到它们的):

[[1.6101837158203125,49.00274483644452],
[1.6294097900390625,49.01175312475694],
[1.5947341918945312,48.98787759766659],
[1.6101837158203125,49.00274483644452]]

一切正常(如图所示)。

但是如果我用这些

[[1.6809940338134766,48.98337149775796],
[1.6791915893554688,48.96849847697763],
[1.7185020446777344,48.995199140974066],
[1.6809940338134766,48.98337149775796]]

这个不能用了。
正如你在这里看到的。

我使用这个网站来生成坐标:
http://www.the-di-lab.com/polygon/(查看截图)

我找了很长时间的问题可能是什么，但我真的不知道。它们的坐标大致相同。第一个lat、lon值与最后一个相同。

如果你有任何想法(我猜在坐标中有一些特殊的东西)，我想知道!

谢谢!

Answer 1

结构上，三角形的坐标是正确的。只有一个几何上的区别:第一个三角形是顺时针方向画的，而第二个三角形是逆时针方向画的。我已经遇到过这样的情况，但我不记得是哪个网站。然后试着用这种方式反转三角形的绘制方向:

     [[1.6809940338134766,48.98337149775796],
     [1.7185020446777344,48.995199140974066]
     [1.6791915893554688,48.96849847697763]
     [1.6809940338134766,48.98337149775796]]