javascript - Google Maps API V3 构建包含多个邮政编码的多边形

Question

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

我使用 Java 编写代码并使用 Google Maps API V3。我可以轻松构建单个邮政编码。但是在添加更多邮政编码后，生成的多段线变得困惑并扭曲了多边形，如下图所示。

我需要在我的代码中更改什么才能将所有这些较小的多边形变成一个较大的多边形？我已经在谷歌上搜索了答案，我所遇到的只是单独构建每个邮政编码的多边形，但这仍然不会给我一个更大的单一多边形的最终结果。

目前，在输入邮政编码后，程序会从数据库中收集纬度和经度点并将它们提供给一个巨大的数组数组(准确地说是一个 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);

建议？是否有一种代码技术可以采用我的巨型阵列，然后移除可能导致这种失真的内部点？

编辑:想知道一种不同的方法，有没有人知道一种方法来删除创建奇怪的梯形东西的内部线，以便邮政编码多边形可以正确填充？我知道我可以使它们透明，但这并不能阻止多边形的变形。此外，将它简单地管理为我填充的几个多边形是行不通的，因为该程序需要能够一次处理多达 200 个邮政编码的坐标。

Answer 1

听起来您想要删除共享边界并创建一种宏对象。在地理信息系统 (GIS) 领域，这种操作称为“Dissolve”。您可以组合两个第 3 方库，以专门在 JavaScript 代码中执行您想要的操作。

如何在 JavaScript 中溶解 GIS

您可以结合使用 Wicket和 JavaScript Topology Suite (JSTS)库来执行合并/溶解操作并派生具有统一外边界的单个多边形几何体。

简单来说，Wicket 将处理从您的 Google map 多边形对象到 Well Known Text (WKT) 几何表达式的往返操作，然后 JSTS 可以使用 WKT 执行联合/分解操作。

预备步骤:下载这两个库并在您的项目中引用它们。

1) 首先 download the JSTS library ，解压它，浏览到 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) 下一页 download the Wicket library ，解压它，并在你的项目中包含 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 执行溶解操作。

3) 联合这两个库从 Wicket 获取 Well Known Text 几何图形，并使用 JSTS 执行溶解操作。

我的演示假定两个 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);
}

基本上是这样的。在执行代码之前..

之后..