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

【问题标题】：GoogleMaps API V3 Build Polygon Containing Multiple ZipCodesGoogle Maps API V3 构建包含多个邮政编码的多边形
【发布时间】：2014-07-26 16:17:25
【问题描述】：

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

我正在使用 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 个邮政编码的坐标。

【问题讨论】：

我终于弄明白了，并彻底检查了我的答案，以演示如何使用两个不同的第三方 JS 库在 Google Maps 上下文中执行 Dissolve。我认为在浏览器应用程序中进行这样的大型分析操作有点讨厌，如果您预计会进行大量地理查询和操作，我仍然建议您使用 PostGREsql/PostGIS，但这肯定可以使用首选技术实现您的目标.

标签： javascript google-maps-api-3 java-8

【解决方案1】：

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

如何在 JavaScript 中进行 GIS Dissolve

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

简单来说，Wicket 将处理您的 Google 地图多边形对象与众所周知的文本 (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 执行 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);
}

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

之后..

【讨论】：

我刚刚找到了 PostGREsql 库，但我不确定如何实现它，如果可以的话，我目前正在使用 Java 的内置数据库和 Derby。我会看看你的建议，看看我可以争取哪一个工作并回复你。
@senex_subconscious，开始使用 PostGREsql/PostGIS 并非易事，尤其是在您的虚拟主机不允许 PostGIS 扩展的情况下。我用WebFaction，他们也用。安装完所有内容后，您将需要了解有关 GIS 数据的基础知识，将其输入和输出 PostGIS 等。首先从第一个 GIS.SE 链接查看 JavaScript Topology Suite。此外，熟悉多边形几何图形的知名文本。 ..this might be useful.
看来无论我选择哪个选项，我仍然必须将庞大的阵列分解成单独的多边形阵列。或者以某种方式让 PostGREsql/PostGIS 正常工作。
是的，您很可能需要遍历每个 Google 地图多边形的顶点并将它们转换为众所周知的文本几何图形。正如我所预料的那样——基于上面提到的 JSTS 库中的this buffer example——该库似乎可以对 Well Known Text 几何表达式进行操作。
@senex_subconscious，看到这里的机会，我添加了一篇博客文章，描述了如何从 Google 多边形对象转换为其等效的众所周知的文本 (WKT) 几何表达式。如果我能弄清楚如何使用 JSTS 进行溶解，我将返回并更新我的答案。但是即使对于 PostGREsql/PostGIS，WKT 也很重要，所以你可能想看看这个。希望它可以为您节省一些时间。 cartometric.com/blog/2014/06/06/…

【解决方案2】：

你可以试试 topojason javascript。一个好的开始也是一个凹壳。我写了一个凹壳 php 类@phpclasses.org。它需要一组点并使用凹壳算法找到凹壳。基本上这是一个 delaunay 三角剖分，你删除了最长的边。你也可以在这里阅读我的回答：Calculate bounding polygon of alpha shape from the Delaunay triangulation。

【讨论】：

【解决方案3】：

解决方案是使用 GeoJson 来表示您想要的内容，并且有一个 API 用于此，因此您不必担心后端或多边形中的任何失真，如下图所示：

这里：www.boundaries-io.com

示例查询：

/rest/v1/public/boundary?zipcode=30044,30043,30045'

您也可以在一行代码中查询多个县、市等。

简单的java脚本： https://developers.google.com/maps/documentation/javascript/datalayer#sample_geojson

... map.data.loadGeoJson('.../rest/v1/public/boundary?zipcode=30044,30042,30045''); ...

results 给出了这个，每个邮政编码都有额外的可查询信息：

*****我在公司工作*

【讨论】：