谷歌地图多边形 - 叠加 [英] google maps polygons - overlay

问题描述

我试图在我的谷歌地图上实施负面覆盖，类似于您在estately.com上获得的效果。基本上，我已经成功绘制了我收集的KML数据的映射多边形。当有多条路径时，它们的绘制就好了。

因此，建模我的例子，首先我从polygonCoords（我的区域周围创建了一组polyLine LatLng对象数组）：

  for（var d = 0; 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（{
路径：polygonCoords，
 strokeWeight ：0，
 strokeOpacity：1，
 strokeColor：＃4F6D8F，
 fillColor：＃000000，
 fillOpacity：0.2，
 clickable：false，
 map：map 
}）; 
  

基本上，我希望会发生的是，我的最初一组polyLines将punch
a hole，因此基本上没有覆盖
的城市边界。如果你去estately.com，并搜索天堂谷，AZ，你
可以看到效果。

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

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

谢谢，
Andy

解决方案

两个路径需要位于同一个多边形中。内孔路径的卷绕方向需要与外路径相反。

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

您的多边形（所有洞似乎都是相同的）。

I am attempting to implement a "negative" overlay on my google maps, similar to the effect that you get at estately.com. Basically, I have successfully drawn up mapping polygons from the KML data I've gathered. When there are multiple paths, they draw up just fine.

So, modeling the example I have, first I create a set of polyLines around my area from polygonCoords (which is an array of arrays of LatLng objects):

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
                                   });
}

I have a "negative space" polygon defined by:

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)]
};

So, I unshift that negative space polygon into my polygonCoords array, and attempt to draw the polygon:

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

Basically, what I'm hoping will happen is that my initial set of polyLines will "punch a hole" in the negative space polygon, so that there is essentially no overlay covering my city boundary. If you go to estately.com, and search for "Paradise Valley, AZ", you can see the effect.

I have tried several variations (Polygons vs Polylines, different fill colors and opacities, etc), but nothing achieves the effect displayed in my sample.

Any ideas? Using the v3 API, BTW.

Thanks, Andy

解决方案

Both paths need to be in the same polygon. The inner hole path winding direction needs to be opposite the outer path.

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 (all of the "holes" seem to be the same).

这篇关于谷歌地图多边形 - 叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！