如何使用Google Maps API在localStorage中用新幾何替換舊幾何？

Question

我的Google Map上有2個數據層： savedLayer （用於在地圖上顯示/加載已保存的數據）和drawLayer （用於在地圖上繪制）。

目前，我可以使用“保存”按鈕將繪制的多邊形存儲在localStorage中的地圖上，然后通過localStorage在地圖上顯示該多邊形。

我正在努力的是在之后對特定多邊形進行的任何更改來更新localStorage。 假設您繪制了3或4個多邊形（我為其分配了唯一的ID）。 如何為所選多邊形更新localStorage中的幾何？ 如何刪除它？ 我基本上想在單擊“保存”后將該多邊形的新更新發送到localStorage。

我知道有一個setgeometry事件可以使用，並且我目前正在使用它來檢測savedLayer的幾何savedLayer更改，但是正在努力用新的幾何替換舊的幾何：

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

JSFiddle- http://jsfiddle.net/h0f3ycf4

PS您當前可以使用鼠標右鍵單擊從地圖上刪除/刪除多邊形。 但是，一旦我點擊“保存”，此更改將不會反映在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();

Answer 1

我沒有花很多時間來閱讀您的代碼，也沒有得到使用兩層而不是一層的意義。 通過一些console.log()語句，我意識到您總是將drawLayer保存到localStorage ，這就是為什么您錯過保存/更新的數據的原因。

我叉你的jsfiddle 這里和做了小的修改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');
            }
        });
    };
}