Javascript 如何使用Google Maps API在localStorage中将旧几何体替换为新几何体？

我在谷歌地图上有两个数据层：

savedLayer

（用于在地图上显示/加载保存的数据）和

drawLayer

（用于在地图上绘图）

我目前可以使用“保存”按钮将绘制的多边形存储在localStorage中的地图上，然后从localStorage将其显示在地图上

我所要做的是用对特定多边形所做的任何更改来更新localStorage。假设您绘制了3或4个多边形（我为它们指定了唯一的ID）。如何在localStorage中更新选定多边形的几何体？如何删除它？我基本上想在单击保存后将多边形的新更新发送到localStorage

我知道我可以使用一个

setgeometry

事件，我目前正在使用它来检测

savedLayer

中的a几何体何时更改，但我正在努力用新几何体替换旧几何体：

changedGeom = savedLayer.addListener('setgeometry', function(e) {
    console.log('changed geometry for polygon #' + e.feature.getProperty('featureID'));
    console.log(e.newGeometry);
});

JSFiddle-

另外，您当前可以使用鼠标右键单击从地图中删除/删除多边形。但一旦我点击Save，这种变化就不会反映在localStorage中

完整JS:

var map, data, drawLayer, savedLayer, changedGeom;
var currentID = 0;
var uniqueID = function() {
    return ++currentID;
}

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -33.865143,
            lng: 151.209900
        },
        zoom: 16,
        clickableIcons: false,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        mapTypeControl: false
    });

    drawLayer = new google.maps.Data({
        map: map
    });
    savedLayer = new google.maps.Data({
        map: map
    });
    drawLayer.setControls(['Polygon']);
    drawLayer.setStyle({
        editable: true,
        draggable: true
    });
    bindDataLayerListeners(drawLayer);
    savePolygons(drawLayer);
    loadPolygons(savedLayer);
}

function bindDataLayerListeners(drawLayer) {
    drawLayer.addListener('addfeature', function(e) {
        e.feature.setProperty('featureID', uniqueID());
    });

    drawLayer.addListener('mouseover', function(e) {
        drawLayer.revertStyle();
        drawLayer.overrideStyle(e.feature, {
            fillOpacity: 0.5,
            editable: true,
            draggable: true
        });
    });
}

function loadPolygons(map) {
    data = JSON.parse(localStorage.getItem('geoData'));

    savedLayer.forEach(function(f) {
        savedLayer.remove(f);
    });

    savedLayer.addGeoJson(data);

    savedLayer.addListener('mouseover', function(e) {
        savedLayer.revertStyle();
        savedLayer.overrideStyle(e.feature, {
            fillOpacity: 0.5,
            editable: true,
            draggable: true
        });
    });

    map.addListener('click', function() {
        savedLayer.revertStyle();
    });

    savedLayer.addListener('rightclick', function(e) {
        data = JSON.parse(localStorage.getItem('geoData'));
        data.features = data.features.filter(function(feature) {
            return feature.properties.featureID !== e.feature.getProperty('featureID');
        });
        savedLayer.remove(e.feature);
    });

    changedGeom = savedLayer.addListener('setgeometry', function(e) {
        console.log('changed geometry for polygon #' + e.feature.getProperty('featureID'));
        console.log(e.newGeometry);
    });
}

function savePolygons(json) {
    var btn = document.getElementById('save-edits');
    btn.onclick = function() {
        // if (changedGeom) {
        // console.log('geometry was changed and updated');
        //savedLayer.addListener('setgeometry', savePolygon);
        // } else {
        // if (json.features.length === 0) {
        // console.log('nothing to save');
        // } else {
        drawLayer.toGeoJson(function(json) {
            localStorage.setItem('geoData', JSON.stringify(json));
            alert('Saved to localStorage');
        });
        //  }
        // }
    };
}
initMap();

---

我没有花太多时间阅读您的代码，也没有意识到使用两层而不是一层。通过一些

console.log（）

语句，我意识到您总是将

drawLayer

保存到

localStorage

中，这就是您丢失保存/更新数据的原因

我将您的JSFIDLE分叉，并在

savePolygons（）

方法中做了一些小的修改，看起来它现在正在按预期工作

简而言之，我确保将数据从

drawLayer

和

savedLayer

保存到

localStorage

，这样我们就不会遗漏任何内容

仅供参考：

function savePolygons(json) {
    var btn = document.getElementById('save-edits');
    btn.onclick = function() {

        var drawLayerData, savedLayerData;

        drawLayer.toGeoJson(function(json) {

            console.log('saving geo data drawLayer ...')
            console.log(json);
            drawLayerData = json;

            if(typeof savedLayerData != 'undefined'){
                json.features = json.features.concat(savedLayerData.features)
                localStorage.setItem('geoData', JSON.stringify(json));
                alert('Data was saved');
            }
        });

        savedLayer.toGeoJson(function(json) {

            console.log('saving geo data savedLayer ...')
            console.log(json);
            savedLayerData = json;

            if(typeof drawLayerData != 'undefined'){
                json.features = json.features.concat(drawLayerData.features)
                localStorage.setItem('geoData', JSON.stringify(json));
                alert('Data was saved');
            }
        });
    };
}

---

谢谢你，沙。我正在测试这个。但是这不是替换了整个集合而不是替换了一个编辑过的多边形吗？@mapr这段代码总是用

drawLayer

和

savedLayer

中的最新数据更新

localStorage

，所以它是在替换整个集合，但它不是按照您的意愿工作？我可以添加新的内容，更改旧的内容，当我保存时，我可以准确地看到我保存的内容-这不是重点吗？是的，它工作得很好。但是如果你把这些存储在数据库中，如果你画了50-100个多边形，发送整个集合而不是刚刚编辑的集合不是很昂贵吗？这个问题是数据库设计的问题，如果您将整个对象

json

存储在MySQL

TEXT

字段中，则可以始终使用最新数据覆盖此字段（人们通过HTTP发送更大的对象）。如果每个多边形只有一行，那么只能将

drawLayer

发送到服务器。可能性很大，正如我说的，这是另一个故事：）祝你好运！谢谢你的想法@sand。谢谢。