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

时间:2014-06-05 15:22:22

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

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

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

我需要更改代码才能将所有这些较小的多边形变成一个较大的多边形?我已经在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个邮政编码的坐标。

3 个答案:

答案 0 :(得分:8)

听起来你想要删除共享边界并创建一种宏对象。在地理信息系统(GIS)领域,这种操作被称为&#34; Dissolve&#34;。您可以将两个第三方库组合在一起,只在JavaScript代码中执行您想要的操作。

如何使用GIS解析

您可以将WicketJavaScript Topology Suite (JSTS)库结合使用以执行Union / Dissolve操作,并派生出具有统一外边界的单个多边形几何体。

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

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

1)首先download the JSTS library,解压缩,浏览lib文件夹,并在项目中包含两个lib文件(javascript.util.jsjsts.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.jswicket-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多边形对象并将其传递给方法 - polygon1polygon2。显然,这只是一个简单的例子,因此您需要对其进行修改以进行更复杂的操作。

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

这里基本上发生了什么。在执行代码之前..

enter image description here

之后..

enter image description here

答案 1 :(得分:0)

你可以试试topojason javascript。一个良好的开端也是一个凹形船体。我写过一个凹形船体php类@ phpclasses.org。它需要一组点,并通过凹壳算法找到凹壳。基本上它是一个delaunay triangualation,你删除最长边。你也可以在这里阅读我的答案:Calculate bounding polygon of alpha shape from the Delaunay triangulation

答案 2 :(得分:0)

解决方案是使用GeoJson来表示你想要的东西,并且有一个API,所以你不必担心多边形的后端或任何失真,如下图所示。:

此处:www.boundaries-io.com

示例查询:

/休息/ V1 /公共/边界?邮政编码= 30044,30043,30045'

您还可以在一行代码中查询多个县,城市等。

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

...   map.data.loadGeoJson(” ... / REST / V1 /公/边界邮编= 30044,30042,30045? ''); ...

结果给出了这个,每个zipcode有额外的可查询信息: enter image description here

*****我为公司工作*