GoogleMaps API V3构建包含多个ZipCodes的多边形 [英] GoogleMaps API V3 Build Polygon Containing Multiple ZipCodes

问题描述

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

m使用Java编码并使用Google Maps API V3。做一个邮政编码我没有问题。但是，如果添加更多的邮政编码，生成的多段线会变干草并扭曲多边形，如下图所示。

什么是否需要更改我的代码以将所有这些较小的多边形合并为一个较大的多边形？我搜索了谷歌的答案，我所遇到的所有问题都是单独构建每个邮政编码的多边形，但这仍然不会让我得到更大的单一多边形的最终结果。

目前，输入邮政编码后，程序从数据库中收集纬度和长点，并将它们输入到一个巨大的数组中（String [] [] ），然后传递html和javascript来生成生成的多边形。

我的javascript与GoogleMaps API V3简单多边形示例非常相似：

 函数clearHello（coords1）{
 coords = coords1 
 var triangleCoords = new Array（）; 
 var l = coords.length; 
 for（var x = 0; x  triangleCoords [x] = new google.maps.LatLng（coords [x] [0]，coords [x] [1] ）; 
} 
 //构造多边形。 
 bermudaTriangle = new google.maps.Polygon（{
 paths：triangleCoords，
 strokeColor：'＃FF0000'，
 strokeOpacity：0.8，
 strokeWeight：2，
 fillColor：'＃FF0000'，
 fillOpacity：0.35 
}）; 
 bermudaTriangle.setMap（document.map）; 
  

建议？是否有一个代码技术，将采取我的巨型阵列，然后删除看起来是这种扭曲的原因内部点？

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

解决方案

听起来你想要移除共享边界并创建一种宏对象。在地理信息系统（GIS）领域，这种操作被称为溶解。您可以将两个第三方库合并为JavaScript代码。

如何在JavaScript中进行GIS解析

您可以将 Wicket 和 JavaScript拓扑套件（JSTS）库执行联合/解散操作并获得具有联合的单个多边形几何外边界。简单来说，Wicket会处理你的Google Maps Polygon对象到Well Known Text（WKT）几何表达式，然后JSTS可以做一个union /使用WKT解散操作。

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

1）首先下载JSTS库，解压缩它会浏览到lib文件夹，并包含两个lib文件（ javascript.util.js 和 jsts.js ）在你的项目中。我将它复制到一个单独的 jsts 文件夹中，并在我的项目中引用它们。

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

<2>下一页下载Wicket库，解压缩并包含 wicket.js 和 wicket-gmap3.js 在你的项目中。同样，我将它复制到一个单独的 wicket 文件夹中，并将它们引用为这样。

 < script type =text / javascriptsrc =wicket / wicket.js>< / script> 
< script type =text / javascriptsrc =wicket / wicket-gmap3.js>< / script> 
  

使用Wicket获取Polygon WKT几何图形，然后使用JSTS执行Dissolve操作。 3）联合使用这两个库来获取Wicket的知名文本几何，并使用JSTS执行Dissolve操作。

我的演示假设两个Google多边形对象已经实例化并传入方法 - polygon1 和 polygon2 。显然这是一个简单的例子，所以你需要修改它以便进行更精细的操作。

 函数DissolveTwoGeometriesWithJSTS（ polygon1，polygon2）
 {
 //实例化Wicket 
 var wicket = new Wkt.Wkt（）; 
 
 wicket.fromObject（polygon1）; //导入Google Polygon 
 var wkt1 = wicket.write（）; //将多边形读入WKT对象
 
 wicket.fromObject（polygon2）; //重复创建第二个WKT ojbect 
 var wkt2 = wicket.write（）; 
 
 //实例化JSTS WKTReader并获取两个JSTS几何对象
 var wktReader = new jsts.io.WKTReader（）; 
 var geom1 = wktReader.read（wkt1）; 
 var geom2 = wktReader.read（wkt2）; 
 
 //在JSTS中，union与dissolve同义
 var dissolvedGeometry = geom1.union（geom2）; 
 
 //实例化JSTS WKTWriter并获取新几何的WKT 
 var wktWriter = new jsts.io.WKTWriter（）; 
 var wkt = wktWriter.write（dissolvedGeometry）; 
 
 //重新使用Wicket对象摄取新几何的WKT 
 wicket.read（wkt）; 
 
 //组装你的新多边形选项，我用对象符号
 var polyOptions = {
 strokeColor：'＃1E90FF'，
 strokeOpacity：0.8，
 strokeWeight：2，
 fillColor：'＃1E90FF'，
 fillOpacity：0.35 
}; 
 
 //让wicket使用您在
之上定义的选项创建一个Google Polygon。var newPoly = wicket.toObject（polyOptions）; 
 
 //现在我将隐藏两个原始多边形并添加新的多边形。 
 polygon1.setMap（null）; 
 polygon2.setMap（null）; 
 
 newPoly.setMap（map）; 
} 
  

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

之后..

I have to allow a user to input multiple zip codes, retrieve the latitude and longitude from a database and then build a huge polygon that encompasses them.

I'm coding in Java and using Google Maps API V3. I have no problem doing a single zip code build. But upon adding more zip codes the polylines that are generated go hay-wire and distort the polygon, as pictured below.

What do I need to change in my code to make all these smaller polygons into one larger one? I've scoured Google for answers and all I've managed to come across is building each zip code's polygon individually but that still won't give me a end result of a larger, single polygon.

Currently, after the zip codes are inputted the program collects the lat and long points from the database and feeds them into a giant array of arrays (a String[][] to be exact), which is then passed the the html and javascript to generate the resulting polygon.

My javascript is highly similar to the GoogleMaps API V3 simple polygon example:

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

Suggestions? Is there a code technique out there that will take my giant array and then remove the interior points that appear to be the cause of this distortion?

EDIT: Wondering about a different approach, does anyone know of a way to remove the interior lines that creating the bizarre trapezoid thing so that the zipcode polygon can fill in properly? I know I can make them transparent, but that doesn't stop the distortion of the polygon. Also simply managing it as a few polygons that I populate won't work as this program needs to be able to handle up to 200 zip codes worth of coordinates at a time.

解决方案

It sounds like you're wanting to remove shared boundaries and create a kind of macro object. In the land of Geographic Information Systems (GIS), this sort of operation is called known as "Dissolve". You can combine two 3rd-party libraries to do what you want exclusively in JavaScript code.

How to do a GIS Dissolve in JavaScript

You can combine both the Wicket and the JavaScript Topology Suite (JSTS) libraries to perform a Union/Dissolve operation and derive a single polygon geometry with a united outer boundary.

In simple terms, Wicket will handle going to and from your Google Maps Polygon objects to Well Known Text (WKT) geometry expressions, and the JSTS can then do a union/dissolve operation using the WKT.

Preliminary steps: Download the two libraries and reference them in your project.

1) First download the JSTS library, unzip it, browse into the lib folder, and include the two lib files (javascript.util.js, and jsts.js) in your project. I copied mine into a separate jsts folder and referenced them in my project like this..

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

2) Next download the Wicket library, unzip it, and include wicket.js and wicket-gmap3.js in your project. Similarly, I copied mine into a separate wicket folder and referenced them like this..

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

Use Wicket to get the Polygon WKT geometries, then use JSTS to perform a Dissolve operation.

3) Unite these two libraries to get Well Known Text geometries from Wicket, and perform a Dissolve operation with JSTS.

My demo assumes two Google polygon objects were already instantiated and were passed into the method—polygon1 and polygon2. Obviously this is intended to be a simple example, so you'll need to modify it for more elaborate operations.

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

Here's what basically happened. Before executing the code..

and after..

这篇关于GoogleMaps API V3构建包含多个ZipCodes的多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！