GoogleMaps API V3构建包含多个ZipCodes的多边形

Question

我必须允许用户输入多个邮政编码,从数据库中检索纬度和经度,然后构建一个包含它们的巨大多边形.

我用Java编写代码并使用Google Maps API V3.我做单个邮政编码构建没有问题.但是,在添加更多邮政编码后,生成的折线会变成干线并扭曲多边形,如下图所示.

我需要在代码中进行哪些更改才能将所有这些较小的多边形组成一个较大的多边形？我已经搜索了Google的答案,而我设法遇到的只是单独构建每个邮政编码的多边形,但仍然不会给我一个更大的单个多边形的最终结果.

目前,在输入邮政编码后,程序从数据库中收集纬度和长点,并将它们输入到一个巨大的数组数组中(确切地说是一个String [] []),然后传递html和javascript到生成结果多边形.

我的javascript与GoogleMaps API V3简单多边形示例高度相似:

function clearHello(coords1){
coords = coords1
var triangleCoords = new Array();
var l = coords.length;
for (var x = 0; x < l; x++){
triangleCoords[x] = new google.maps.LatLng( coords[x][0], coords[x][1]);
}
// Construct the polygon.
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(document.map);

建议？有没有一种代码技术会占用我的巨型阵列,然后移除看似导致这种失真的内部点？

编辑:想知道一个不同的方法,有没有人知道一种方法来删除创建奇怪的梯形的内部线条,以便zipcode多边形可以正确填写？我知道我可以让它们透明,但这并不能阻止多边形的扭曲.另外,简单地将其作为我填充的几个多边形进行管理将无法工作,因为此程序需要一次最多能够处理多达200个邮政编码的坐标.

Answer 1

听起来你想要删除共享边界并创建一种宏对象.在地理信息系统(GIS)领域,这种操作被称为" 溶解 ".您可以组合两个第三方库,以便在JavaScript代码中专门执行您想要的操作.

如何做一个GIS溶解在JavaScript中

您可以将Wicket和JavaScript拓扑套件(JSTS)库结合使用来执行Union/Dissolve操作,并派生出具有统一外边界的单个多边形几何体.

简单来说,Wicket将处理往返于Google Maps Polygon对象的已知文本(WKT)几何表达式,然后JSTS可以使用WKT进行联合/解除操作.

初步步骤:下载两个库并在项目中引用它们.

1)首先下载JSTS库,解压缩,浏览到lib文件夹,并在项目中包含两个lib文件(javascript.util.js,和jsts.js).我将我复制到一个单独的jsts文件夹中并在我的项目中像这样引用它们.

<script type="text/javascript" src="jsts/javascript.util.js"></script>
<script type="text/javascript" src="jsts/jsts.js"></script>

2)然后下载检票库,将它解压缩,并包括wicket.js与wicket-gmap3.js在您的项目.同样,我将我复制到一个单独的wicket文件夹中并像这样引用它们.

<script type="text/javascript" src="wicket/wicket.js"></script>
<script type="text/javascript" src="wicket/wicket-gmap3.js"></script>

使用Wicket获取Polygon WKT几何,然后使用JSTS执行Dissolve操作.

3)联合这两个库以从Wicket获取Well Known Text几何,并使用JSTS执行Dissolve操作.

我的演示假设已经实例化了两个Google多边形对象并将其传递给方法polygon1和polygon2.显然,这只是一个简单的例子,因此您需要对其进行修改以进行更复杂的操作.

function DissolveTwoGeometriesWithJSTS(polygon1, polygon2)
{
    // Instantiate Wicket
    var wicket = new Wkt.Wkt();

    wicket.fromObject(polygon1);  // import a Google Polygon
    var wkt1 = wicket.write();    // read the polygon into a WKT object

    wicket.fromObject(polygon2);  // repeat, creating a second WKT ojbect
    var wkt2 = wicket.write();

    // Instantiate JSTS WKTReader and get two JSTS geometry objects
    var wktReader = new jsts.io.WKTReader();
    var geom1 = wktReader.read(wkt1);
    var geom2 = wktReader.read(wkt2);

    // In JSTS, "union" is synonymous with "dissolve"
    var dissolvedGeometry = geom1.union(geom2);

    // Instantiate JSTS WKTWriter and get new geometry's WKT
    var wktWriter = new jsts.io.WKTWriter();
    var wkt = wktWriter.write(dissolvedGeometry);

    // Reuse your Wicket object to ingest the new geometry's WKT
    wicket.read(wkt);

    // Assemble your new polygon's options, I used object notation
    var polyOptions = {
        strokeColor: '#1E90FF',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#1E90FF',
        fillOpacity: 0.35    
    };

    // Let wicket create a Google Polygon with the options you defined above
    var newPoly = wicket.toObject(polyOptions);        

    // Now I'll hide the two original polygons and add the new one.
    polygon1.setMap(null);
    polygon2.setMap(null);

    newPoly.setMap(map);
}

这是基本上发生的事情.在执行代码之前..

之后..