Multipolygon用谷歌地图V3创建孔效果?

时间:2013-06-03 16:51:43

标签: google-maps-api-3 polygon

我们有多边形,第一个多边形将是最大的多边形,其余的是较小的多边形。我们现在设法做了以下事情。问题是我们希望多边形的其余部分在第一个大多边形中创建类似的孔效果。我们已经阅读了这个google maps polygons - overlay但是没有得到如何实现这一点。很多地方他们谈到这个“内孔路径缠绕方向需要与外部路径相对”。如何基于我的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;
    }         

1 个答案:

答案 0 :(得分:1)

“孔”需要是外部多边形中的路径,而不是另一个google.maps.Polygon

example of complex polygon with different paths and winding directions

你需要从有多个洞的多边形开始(你的MULTIPOLYGON不是):

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