logo标签列表

谷歌地图多边形叠加层

google-mapspolygons
3
我正在尝试在我的谷歌地图上实现一个“负”叠加层，类似于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，并搜索“Paradise Valley, AZ”，您就可以看到效果。
我已经尝试了几种变化（多边形 vs PolyLines、不同的填充颜色和不透明度等），但没有一种达到了示例所显示的效果。
有什么想法吗？顺便说一下，我正在使用 v3 API。
谢谢， Andy
1个回答
0
我相信我已经做好了准备。在绘制叠加层时，我在绘制之前既添加了周围的多边形（unshift），也添加了周围的多边形（append）。本质上，我的多边形看起来像这样： [ [surround: (10, -170),(80, -170),(80, -50),(10, -50),(10, -170)] [boundary: (28.646438, 80.84433100000001), (28.642874, 80.84357699999998), (28.642874, 80.84317699999997) ...] ] 我想我明白了你所说的“缠绕方向需要相反”-我尝试了反转外部孔坐标方向，但没有成功...感谢您的建议，我会继续探索。 - Andy Wallace
顺便说一下，第二个例子（按钮）在Firefox中似乎无法正常工作。 - Andy Wallace
谢谢！我从多边形凸度和卷绕方向的样例网站中找到了一些代码。我正在处理包含五个多边形的样例 - 外部一个及其内部的四个（它是由人口普查数据生成的佛罗里达州提图斯维尔地图）。结果如下： 0::Convex? 1, Wind: 16800 1::Convex? -1, Wind: -0.012936066837028193 2::Convex? -1, Wind: -0.012936066837028193 3::Convex? -1, Wind: -0.012936066837028193 4::Convex? -1, Wind: -0.012936066837028193 我将在接下来的信息中发布包含坐标集的文件的访问权限。 - Andy Wallace
好的，我想我找到问题所在了... 我从人口普查信息中获取的嵌套多边形正在破坏事情。如果我将该集合简化为仅第一个，它可以工作（尽管可能不是所有的“部分”都在那里）。感谢你的帮助。 - Andy Wallace
是的，看起来这是问题的一部分。有多个“外部”多边形，这是一个小问题。 - Andy Wallace
显示剩余5条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接