GoogleMaps API V3 Build Polygon, содержащий несколько почтовых индексов

Я должен позволить пользователю вводить несколько почтовых индексов, извлекать широту и долготу из базы данных, а затем строить огромный многоугольник, который их охватывает.

Я кодирую на Java и использую Google Maps API V3. У меня нет проблем со сборкой одного почтового индекса. Но при добавлении дополнительных почтовых индексов сгенерированные полилинии выходят из строя и искажают многоугольник, как показано на рисунке ниже. суетливый многоугольник карты Google

Что мне нужно изменить в моем коде, чтобы сделать все эти меньшие полигоны одним большим? Я поискал в 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);

Предложения? Существует ли метод кода, который возьмет мой гигантский массив, а затем удалит внутренние точки, которые, по-видимому, являются причиной этого искажения?

РЕДАКТИРОВАТЬ: интересно узнать о другом подходе, знает ли кто-нибудь способ удалить внутренние линии, создающие причудливую трапециевидную вещь, чтобы многоугольник почтового индекса мог правильно заполниться? Я знаю, что могу сделать их прозрачными, но это не остановит искажение многоугольника. Кроме того, простое управление им как несколькими полигонами, которые я заполняю, не будет работать, поскольку эта программа должна иметь возможность обрабатывать до 200 почтовых индексов с координатами за раз.


person senex_subconscious    schedule 05.06.2014    source источник
comment
Наконец-то я понял это и пересмотрел свой ответ, чтобы продемонстрировать, как вы можете использовать две разные сторонние библиотеки JS для выполнения Dissolve в контексте Google Maps. Я думаю, что выполнение большой аналитической операции, подобной этой, немного неприятно в браузерном приложении, и я все же рекомендую использовать PostGREsql/PostGIS, если вы планируете выполнять много географических запросов и манипуляций, но это, безусловно, должно достичь вашей цели с использованием предпочтительных технологий. .   -  person elrobis    schedule 06.06.2014


Ответы (3)


Похоже, вы хотите удалить общие границы и создать своего рода макрообъект. В мире географических информационных систем (ГИС) такая операция называется «Растворить". Вы можете комбинировать две сторонние библиотеки, чтобы делать то, что вы хотите, исключительно в коде JavaScript.

Как выполнить растворение ГИС в JavaScript

Вы можете комбинировать как Wicket, так и JavaScript Topology Suite (JSTS) для выполнения операции объединения/разъединения и получения единой полигональной геометрии с единой внешней границей.

Проще говоря, Wicket будет обрабатывать переход к объектам полигонов Google Maps и обратно к геометрическим выражениям Well Known Text (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, распакуйте ее и включите 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, и выполните операцию растворения с помощью 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);
}

Вот что в основном произошло. Перед выполнением кода..

введите здесь описание изображения

и после..

введите здесь описание изображения

person elrobis    schedule 05.06.2014
comment
Я только что нашел библиотеку PostGREsql, но я не уверен, как я буду ее реализовывать, если я даже смогу, в настоящее время я использую встроенную базу данных Java с Derby. Я рассмотрю обе ваши рекомендации и посмотрю, какую из них я могу заставить работать, и вернусь к вам. - person senex_subconscious; 05.06.2014
comment
@senex_subсознательный, начать работу с PostGREsql/PostGIS нетривиально, особенно если ваш веб-хост не разрешает расширения PostGIS. Я использую WebFaction, и они это делают. После того, как все будет установлено, вам понадобятся базовые знания о ГИС-данных, получении и извлечении их из PostGIS и т. д. Начните с изучения этого JavaScript Topology Suite из первой ссылки GIS.SE. Кроме того, ознакомьтесь с общеизвестным текстом для полигональной геометрии. ... это может быть полезно. - person elrobis; 05.06.2014
comment
Кажется, независимо от того, какой вариант я выберу, мне все равно придется разбивать массивный массив на отдельные массивы полигонов. Или как-то заставить работать PostGREsql/PostGIS. - person senex_subconscious; 05.06.2014
comment
Да, скорее всего, вам нужно перебрать вершины каждого многоугольника Google Maps и преобразовать их в геометрию известного текста. Как я и ожидал, на основе этого примера буфера из Упомянутая выше библиотека JSTS — кажется, что библиотека работает с геометрическими выражениями Well Known Text. - person elrobis; 06.06.2014
comment
@senex_subсознательный, увидев здесь возможность, я добавил сообщение в блоге, описывающее, как преобразовать объекты Google Polygon в их эквивалентные геометрические выражения Well Known Text (WKT). Если я смогу понять, как выполнить растворение с помощью JSTS, я вернусь и обновлю свой ответ. Но WKT будет важен даже для PostGREsql/PostGIS, так что вы можете взглянуть на это. Надеюсь, это сэкономит вам время. cartometric.com/blog/2014/06/06/ - person elrobis; 06.06.2014
comment
Ух ты! Также отлично подходит для расширения WKT, так как я также использую его в своей программе! Отлично и подробно, большое спасибо за ваше время и помощь! - person senex_subconscious; 07.06.2014
comment
@senex_subсознательный, без проблем. Я рад, что это поможет. Обратите внимание, что я сделал последний пересмотр этого кода. Я забыл повторно использовать Wicket на последнем шаге, чтобы перейти от WKT к Google Polygon, поэтому я вернулся, чтобы исправить это. Первоначально я использовал не Wicket, а самодельное решение. Однако я думаю, что лучше использовать Wicket, так как он обрабатывает больше случаев геометрии и был выпущен как отточенный API. Кроме того, так код выглядит намного чище. :) - person elrobis; 07.06.2014

Вы можете попробовать topojason javascript. Хорошим началом также является вогнутый корпус. Я написал класс php с вогнутым корпусом @ phpclasses.org. Он берет набор точек и находит вогнутую оболочку с помощью алгоритма вогнутой оболочки. По сути, это триангуляция Делоне, и вы удаляете самые длинные ребра. Вы также можете прочитать мой ответ здесь: Вычислить ограничивающий многоугольник альфа-формы из триангуляции Делоне.

person Gigamegs    schedule 05.06.2014

Решение состоит в том, чтобы использовать 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''); ...

результаты дают это с дополнительной запрашиваемой информацией для каждого почтового индекса: введите описание изображения здесь

*****Я работаю в компании*

person Jeryl Cook    schedule 04.03.2016