Question

我正在尝试在我的Google地图上实施“负面”叠加层，类似于您在estately.com上获得的效果。基本上，我已经成功地从我收集的KML数据中绘制了映射多边形。当有多条路径时，它们就会很好地制定。

所以，对我的例子进行建模，首先我从polygonCoords（这是一个LatLng对象数组的数组）创建一个围绕我的区域的polyLines集合：

for (var d = 0 ; d < polygonCoords.length ; d++) 
{
  var b = new google.maps.Polyline( {
                                    path: polygonCoords[d],
                                    strokeWeight: 4,
                                    strokeColor: "#4F6D8F",
                                    strokeOpacity: 1,
                                    map: map
                                   });
}

我有一个“负空间”多边形，由：

定义

function negativeSpaceBoundary()
{
  return [new google.maps.LatLng(10, -170), 
          new google.maps.LatLng(10, -50), 
          new google.maps.LatLng(80, -50), 
          new google.maps.LatLng(80, -170), 
          new google.maps.LatLng(10, -170)]
};

所以，我将负空间多边形移到我的polygonCoords数组中，然后尝试绘制多边形：

negativeSpace = new google.maps.Polygon( {
                                           path: polygonCoords,
                                           strokeWeight: 0,
                                           strokeOpacity: 1,
                                           strokeColor: "#4F6D8F",
                                           fillColor: "#000000",
                                           fillOpacity: 0.2,
                                           clickable: false,
                                           map: map
                                         });

基本上，我希望将会发生的是我的初始polyLines集合将“打击” 在负空间多边形中的一个洞，因此基本上没有覆盖层我的城市边界。如果你去estately.com，并搜索“天堂谷，AZ”，你可以看到效果。

我尝试了几种变体（多边形与折线，不同的填充颜色和不透明等），但没有达到我样本中显示的效果。

有什么想法吗？使用v3 API，BTW。

谢谢，安迪

Answer 1

两条路径都必须位于同一个多边形中。内孔路径卷绕方向需要与外路径相对。

http://www.geocodezip.com/v3_polygon_example_donut.html

http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_nosidebar.html?lat=37.155939&lng=-79.497071&zoom=6&type=m&filename=http://www.geocodezip.com/geoxml3_test/virginia_inverted_kml.xml

Your polygon（所有“漏洞”似乎都相同）。

谷歌地图多边形 - 叠加

1 个答案: