用Google Maps V3创建洞效应的多维多边形？

问题描述

我们有多面体，第一个多边形将会是最大的多边形，其余的将是较小的。我们现在设法在下面做些事情。问题是我们希望剩下的多边形在第一个大多边形中创建类似于空洞的效果。我们已阅读此，但没有得到如何实现这一点。他们谈论这个内孔路径缠绕方向需要与外路径相反的地方很多。如何根据我的经验做到这一点？

  var mps = [MULTIPOLYGON（（4 47,19.1 50.1,18.1 60,4 47），（3.9 46.9,28.5 （（50 57,20.1 47.1,1 1,50 57），（11.9 46.9,31.5 46.5,50 1,11.9 46.9））];多金属离子 
 for（i in mps）{
 var lines = drawPoly（mps [i] .replace（MULTIPOLYGON，））; （k = 0; k  lines [k] .setMap（map）; 
 
} 
 lines.length = 0; 
} 
 
 
函数drawPoly（multipolygonWKT）{
 var polylines = []; 
 var toReturn = []; 
 
 var formattedValues = multipolygonWKT.replace（）），）; 
 formattedValues = formattedValues.replace（（（，）; 
 
 
 var linesCoords = formattedValues.split（），（）; 
 $对于（i = 0; i  polylines [i] = []; 
 var singleLine = linesCoords [i]，b 
 
 $ b。 split（，）; 
 
 for（j = 0; j< singleLine.length; j ++）{
 var coordinates = singleLine [j] .split（）; 
 var latlng = new google.maps.LatLng（parseFloat（coordinates [1]），parseFloat（coordinates [0]））; 
 
 polylines [i] .push（latlng）; 
 
 
 
 
 //现在你应该让多段线数组充满数组来保存多重线的多段线的坐标
 // let loop （k = 0; k  var line = polylines [k]; 
 if（k == 0）{ 
 toReturn.push（新增google.maps.Polygon（{
路径：行，
 strokeColor：'＃FF00FF'，
 strokeOpacity：0，
 strokeWeight：6，
 fillColor：'＃1E90FF'，
 fillOpacity：0， 
 zIndex：1 
}））; 
} 
 else if（k> 0）
 {
 toReturn.push（
 new google.maps.Polygon（{
 paths：line，
 strokeColor：'＃1122AA'，
 strokeOpacity：1，
 strokeWeight：2，
 zIndex：1 
}）
）; 
} 
} 
返回到结束; 
 
  

解决方案

是外部多边形中的路径，而不是另一个google.maps.Polygon

您需要从多边形开始，这些多边形中有多个洞（您的多边形的 t）：

We have multipolygon and where the first polygon will be the biggest one and rest will be smaller ones. We have now managed to do something below. The issue is that we want the rest of the polygon to create like hole effect into the first big polygon. We have read this google maps polygons - overlay but dont get how achieve this. Lots of places they talk about this "inner hole path winding direction needs to be opposite the outer path." How to get this done based on my lat long?

 var mps = ["MULTIPOLYGON((4 47,19.1 50.1,18.1 60,4 47),(3.9 46.9,28.5 46.5,5 30,3.9 46.9))", "MULTIPOLYGON((50 57,20.1 47.1,1 1,50 57),(11.9 46.9,31.5 46.5,50 1,11.9 46.9))"];
        for(i in mps){
            var lines = drawPoly(mps[i].replace("MULTIPOLYGON",""));
            for(k=0;k<lines.length;k++){
                lines[k].setMap(map);
            }
            lines.length = 0;
        }


function drawPoly(multipolygonWKT){
        var polylines = [];
        var toReturn = [];

        var formattedValues = multipolygonWKT.replace("))", "");
             formattedValues = formattedValues.replace("((", "");


        var linesCoords = formattedValues.split("),(");



        for(i=0;i<linesCoords.length;i++){
            polylines[i] = [];
            var singleLine = linesCoords[i].split(",");

            for(j=0;j<singleLine.length;j++){
                var coordinates = singleLine[j].split(" ");
                var latlng = new google.maps.LatLng(parseFloat(coordinates[1]), parseFloat(coordinates[0]));

                polylines[i].push(latlng);

            }
        }

    //by now you should have the polylines array filled with arrays that hold the coordinates of the polylines of the multipolyline
    //lets loop thru this array

    for(k=0;k<polylines.length;k++){
        var line = polylines[k];
        if(k==0){
            toReturn.push(new google.maps.Polygon({
                                                paths: line,
                                                strokeColor: '#FF00FF',
                                                strokeOpacity: 0,
                                                strokeWeight: 6,
                                                fillColor: '#1E90FF',
                                                fillOpacity: 0,
                                                zIndex:1
            }));
        }
        else if(k>0)
        {
            toReturn.push(
                new google.maps.Polygon({
                                                paths: line,
                                                strokeColor: '#1122AA',
                                                strokeOpacity: 1,
                                                strokeWeight: 2,
                                                zIndex:1
                })
            );
        }
    }
    return toReturn;
    }

解决方案

The "holes" need to be a path in the outside polygon, not another google.maps.Polygon

example of complex polygon with different paths and winding directions

You need to start with polygons that have holes in them (your MULTIPOLYGON's don't):

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

这篇关于用Google Maps V3创建洞效应的多维多边形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！