Javascript 在localStorage中存储多边形

当用户放大我的地图时，我发送当前边界框以从数据库中获取多边形，并在localStorage中进行设置。它们作为JSON传输，因此类似于

[{“polygons”：{“features”：[{“geometry”：{“coordinates”：[…]

（当然是实际坐标）

随着用户的进一步探索（平移、缩放）在地图上，多边形不断添加到同一个localStorage键。我的问题是，既然这些多边形在localStorage中，我该如何加载它们？我想减少发送到数据库的请求数。如果某些多边形已经加载到地图上，我不想再次从数据库中请求这些多边形e

我可以从localStorage设置和获取多边形，但我的问题是逻辑，如下所示。这是完整的函数

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

这是上面使用的

addPolygons

函数：

function addPolygons(json) {
    data = json;

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

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

边界框的定义如下：

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：它使用

map.data.addGeoJson（data['polygons']）；

（请参阅我设置的IF语句中的第3行）。但是现在，当我开始平移地图时，我没有看到从数据库请求新的多边形（地图上不存在的多边形）

编辑v2：我正在试验的一件事是跟踪地图中心的变化。如果地图中心的变化值为X，则请求新的多边形。如果我可以完成此操作，希望使用答案进行更新

编辑v3：这是第二次提取后的

polyArray

外观。初始提取为空。

[对象]
0:对象
多边形：对象
特征：数组[209]
类型：“FeatureCollection”
__原型：对象
__原型：对象
1：对象
多边形：对象
特征：数组[205]
类型：“FeatureCollection”
__原型：对象
__原型：对象
长度：2
__原型：数组[0]

将此

设置为google.maps.event.addListener（映射，'idle'，函数（）

a

bounds\u改为
函数。基于谷歌的建议：

Maps API独立触发后一个事件，getBounds（）可能
只有在视口获得授权后，才能报告有用的结果
已更改。如果希望在此类事件之后获取边界（），请确保
改为收听您更改的事件

“后一种”事件是指
zoom\u changed
或
center\u changed
，这可能不是最有效的方法

编辑的代码段（超时一秒）：
var超时；
google.maps.event.addListener（映射'bounds_changed'，函数（）{
clearTimeout（超时）；
timeout=window.setTimeout（函数（）{
if（localStorage.getItem（'polygons'））{
...
}否则{
bounds=getBounds（）；
...
}
});
},
1000）；
将此
google.maps.event.addListener（map'idle'，function（）
a
bounds\u改为
函数。基于谷歌的建议：

Maps API独立触发后一个事件，getBounds（）可能
只有在视口获得授权后，才能报告有用的结果
已更改。如果希望在此类事件之后获取边界（），请确保
改为收听您更改的事件

“后一种”事件是指
zoom\u changed
或
center\u changed
，这可能不是最有效的方法

编辑的代码段（超时一秒）：
var超时；
google.maps.event.addListener（映射'bounds_changed'，函数（）{
clearTimeout（超时）；
timeout=window.setTimeout（函数（）{
if（localStorage.getItem（'polygons'））{
...
}否则{
bounds=getBounds（）；
...
}
});
},
1000）；
根据此问题（现已删除）的上一版本中的要求：请提供一个示例，演示您试图解决的问题。我似乎没有任何问题从localStorage（以我自己的JSON格式）存储和检索多边形（显示在地图上）.Hi@geocodezip——是的，现在我也可以存储和检索多边形，但只能用于初始视口。当边界发生变化时，
localStorage
中不存在的新多边形不会从数据库中得到请求。我正试图通过JSFIDLE提供一个示例。我只是现在无法访问dev服务器。我的怀疑是您需要更聪明地了解如何将新多边形合并到
polyArray
。第二次提取后polyArray是什么样子的？最初，它是空的（
[]
）。在第二次提取之后，它是一个对象。我添加了
控制台。log
导致了我上面的问题。因此数组中的功能数量会根据进入视口的内容而变化。但是，您只需要更新功能数组，就有一个功能集合数组。您可能可以通过这种方式使其工作，但我认为它不会改变我将使用您当前的代码。您是否正在进行任何检查以防止重复多边形？正如此问题（现已删除）的上一版本中所要求的：请提供一个示例，演示您试图解决的问题。我似乎在从localStorage存储和检索多边形（显示在地图上）时没有遇到任何问题（以我自己的JSON格式）.Hi@geocodezip——是的，现在我也可以存储和检索多边形，但只能用于初始视口。当边界发生变化时，
localStorage
中不存在的新多边形不会从数据库中得到请求。我正试图通过JSFIDLE提供一个示例。我只是现在无法访问dev服务器。我的怀疑是您需要更聪明地了解如何将新多边形合并到
polyArray
。第二次提取后polyArray是什么样子的？最初，它是空的（
[]
）。第二次提取后，它是一个对象。我添加了<
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;
}