将多边形合并到Google Maps API 3中

Question

Part of my web application will allow users to click on a certain territory of a map and have it highlight that section in the Google Maps that I have on the page. This is pretty standard on a lot of websites, but I'm having a hard time with the amount of data that's there.

I'm trying to generate data from http://global.mapit.mysociety.org/ , which provides me several output options for actual coordinates that I want to turn into polygons, but exporting the WKT, GeoJSON, or the KML is HUGE - 700-900 KB for EACH instance, and I don't understand how this website is able to incorporate these polygons without loading this data, (Chrome doesn't show any item over 50 KB being loaded.)

What I'm doing NOW:

I downloaded a few of the WKT files, then used PHP to translate that into a javascript string so :

var coordinates = [
new google.maps.LatLng(1.1, 1.2),
...
new google.maps.LatLng(1.1, 1.2)
];

I did this with about 10 locations, saved my file, and it was 9 MB - all from these super long coordinates strings...

How do I do this more efficiently, as this is obviously not the way to incorporate polygon data into a dynamic map load?

Answer 1

Don't translate it on serverside, the string new google.maps.LatLng will blow up your file.

When you use eg geoJSON you may load the polygon via loadGeoJson .

The linked page uses geoJSON to draw the polygons(eg http://global.mapit.mysociety.org/area/686972.html loads these data: http://global.mapit.mysociety.org/area/686972.geojson?simplify_tolerance=0.0001 ~100KB)

Another option would be to encode each single polygon(polyline) on serverside and reassemble/decode the polygons via JS. See https://developers.google.com/maps/documentation/utilities/polylinealgorithm and https://developers.google.com/maps/documentation/javascript/reference#encoding for more details.