Search code examples
javascriptgoogle-mapsgoogle-maps-api-3wkt

get google maps polygon inner cords


I'm developing a GIS and im working with wicket.js and WKT(jsts.js) to make union of polygons.

I've drawn two polygons

enter image description here

Then, when i make the union of these two polygons, the output polygon dont have the hole inside

enter image description here

I've searched on the internet and i've found that to make a hole inside a polygon you have to set the inner and outer cords, since that the inner is the hole.

Anyone knows how to get the inner cords with wicket.js?

CODE:

function dissolvePolygons(wicket, arrayPolygons) {
//convert polygons to WKT objects
var polygonsWTKObjects = polygonToWktObject(wicket, arrayPolygons);
//read wkt with jsts
var jstsGeometryObjects = jstsWKTReader(polygonsWTKObjects);
//union two jsts objects
var dissolvedGeometry = jstsGeometryObjects[0].union(jstsGeometryObjects[1]);
// Instantiate JSTS WKTWriter and get new geometry's WKT
var wktWriter = new jsts.io.WKTWriter();
var unionWKT= wktWriter.write(dissolvedGeometry);
// Reuse your Wicket object to ingest the new geometry's WKT
wicket.read(unionWKT);

var polyOptions = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
};

var newPoly = wicket.toObject(polyOptions);
return newPoly;

//unionWKT value:
"POLYGON((-8.745800000000031 41.405,-8.632200000000011 41.4068,-8.621899999999982 41.3264,-8.61480000000006 41.2725,-8.730199999999968 41.2732,-8.73599999999999 41.3238,-8.745800000000031 41.405),(-8.649800000000027 41.3261,-8.655999999999949 41.3594,-8.703399999999987 41.3627,-8.696199999999976 41.3228,-8.695500000000038 41.2975,-8.646099999999933 41.2993,-8.649800000000027 41.3261))
}"


//CONVERT GOOGLE MAPS POLYGONS TO WKT EXPRESSIONS
function polygonToWktObject(wicket, arrayPolygons) {
var arrayPolygonWTKObjects = [];
var arrayPolygonWTKObjectsTest = [];
for (var i = 0, len = arrayPolygons.length; i < len; i++)
    arrayPolygonWTKObjectsTest.push(arrayPolygons[i].ToWKT());
return arrayPolygonWTKObjectsTest;
}

//READ WKT OBJECTS WITH JSTS
function jstsWKTReader(polygonsWTKObjects) {
// Instantiate JSTS WKTReader and get JSTS geometry objects
var arrayJSTSGeometricObjects = [];
var wktReader = new jsts.io.WKTReader();
for (i = 0, len = polygonsWTKObjects.length; i < len; i++)
    arrayJSTSGeometricObjects.push(wktReader.read(polygonsWTKObjects[i]));
return arrayJSTSGeometricObjects;
}
//gmap polygon extend
google.maps.Polygon.prototype.ToWKT = function () {
var poly = this;
var wkt = "POLYGON(";
var paths = poly.getPaths();
for (var i = 0; i < paths.getLength() ; i++) {
    var path = paths.getAt(i);
    wkt += "(";
    for (var j = 0; j < path.getLength() ; j++) {
(trailing comma)
        wkt += path.getAt(j).lng().toString() + " " + path.getAt(j).lat().toString() + ",";
    }
    wkt += path.getAt(0).lng().toString() + " " + path.getAt(0).lat().toString() + "),";
}

// resolve the last trailing "," and close the Polygon
wkt = wkt.substring(0, wkt.length - 1) + ")";

return wkt;
};

Solution

  • On 4 May 2016 there was an update of wicket-gmap3.js correcting the orientation of inner rings.

    This code works as expected with the latest version:

    var wicket = new Wkt.Wkt();
    wicket.read('POLYGON((-8.745800000000031 41.405,-8.632200000000011 41.4068,-8.621899999999982 41.3264,-8.61480000000006 41.2725,-8.730199999999968 41.2732,-8.73599999999999 41.3238,-8.745800000000031 41.405),(-8.649800000000027 41.3261,-8.655999999999949 41.3594,-8.703399999999987 41.3627,-8.696199999999976 41.3228,-8.695500000000038 41.2975,-8.646099999999933 41.2993,-8.649800000000027 41.3261))');
    wicket.toObject(map.defaults).setMap(map);