Multipolygon creating the hole effect with google map V3?

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/16901830/multipolygon-creating-the-hole-effect-with-google-map-v3

标签

google-maps-api-3

polygon