在本地存储中存储多边形

Question

When a user zooms into my map, I send the current bounding box to get the polygons from the database and set them in localStorage. They are transferred as JSON so something like [{"polygons":{"features":[{"geometry":{"coordinates":[...]] (with actual coordinates of course).

bounds = getBounds();
$.ajax({
    url: '/getPolygons',
    type: 'POST',
    data: JSON.stringify(bounds),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (data) {
        polyArray = JSON.parse(localStorage.getItem('polygons')) || [];
        polygons = data;
        polyArray.push(polygons);
        localStorage.setItem('polygons', JSON.stringify(polyArray));
    }
});

As the user further explores (pan, zoom) the map, the polygons keep on adding to the same localStorage key. My question is, how do I load these polygons now that they are in the localStorage? I want to reduce the number of requests sent to the database. If certain polygons have already loaded on the map, I do not want to request for those polygons again from the database.

I am able to set and get the polygons from localStorage, but the problem I have is with logic, which is as follows. This is the complete function.

google.maps.event.addListener(map, 'idle', function () {
    if (localStorage.getItem('polygons')) {
        var data = JSON.parse(localStorage.getItem('polygons'));
        map.data.addGeoJson(data['polygons']);
    } else {
        bounds = getBounds();
        $.ajax({
            url: '/getPolygons',
            type: 'POST',
            data: JSON.stringify(bounds),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
                addPolygons(data);
                polyArray = JSON.parse(localStorage.getItem('polygons')) || [];
                polygons = data;
                polyArray.push(polygons);
                localStorage.setItem('polygons', JSON.stringify(polyArray));
            }
        });
    }
});

This the addPolygons function as used above:

function addPolygons(json) {
    data = json;

    if (typeof polygons !== 'undefined') {
        map.data.forEach(function(feature) {
            map.data.remove(feature);
        });
    }

    polygons = map.data.addGeoJson(data['polygons']);   
}

The bounding box is defined as follows:

function getBounds() {
    var boundsNE = map.getBounds().getNorthEast();
    var boundsSW = map.getBounds().getSouthWest();
    var ne = [ boundsNE.lng(), boundsNE.lat() ];
    var nw = [ boundsSW.lng(), boundsNE.lat() ];
    var sw = [ boundsSW.lng(), boundsSW.lat() ];
    var se = [ boundsNE.lng(), boundsSW.lat() ];
    var ne = [ boundsNE.lng(), boundsNE.lat() ];
    var boundsArray = [ ne, nw, sw, se, ne ];
    return boundsArray;
}

---

Edit : It worked using map.data.addGeoJson(data['polygons']); (see 3rd line in the IF statement I have setup). But now when I start panning the map, I don't see new polygons being requested from the database (the ones that don't exist on the map).

Edit v2 : One thing I am experimenting with is tracking the change in map center. If the map center changes by X number of value, then request new polygons. Hope to update with answer if I can get this working.

Edit v3 : This is what polyArray looks like after second fetch. Initial fetch is empty. [Object] 0: Object polygons: Object features: Array[209] type: "FeatureCollection" __proto__: Object __proto__: Object 1: Object polygons: Object features: Array[205] type: "FeatureCollection" __proto__: Object __proto__: Object length: 2 __proto__: Array[0]

Answer 1

Make this google.maps.event.addListener(map, 'idle', function () a bounds_changed function instead. Suggestion based on Google documentation :

the Maps API fires these latter events independently, getBounds() may not report useful results until after the viewport has authoritatively changed. If you wish to getBounds() after such an event, be sure to listen to the bounds_changed event instead.

"latter" events means the zoom_changed or center_changed which may not be the most effective approach.

EDITED SNIPPET (with a second of timeout):

 var timeout; google.maps.event.addListener(map, 'bounds_changed', function() { window.clearTimeout(timeout); timeout = window.setTimeout(function() { if (localStorage.getItem('polygons')) { ... } else { bounds = getBounds(); ... } }); }, 1000);