Question

我的Google地图上有2个数据图层：savedLayer（用于在地图上显示/加载已保存的数据）和drawLayer（用于在地图上绘图）。

我目前能够使用“保存”按钮在localStorage中的地图上存储绘制的多边形，然后在localStorage的地图上显示它。

我正在努力解决的问题是更新localStorage，以及之后对特定多边形所做的任何更改。让我们说你绘制3个或4个多边形（我为它们分配了唯一的ID）。如何更新localStorage中所选多边形的几何图形？我该如何删除它？我基本上想要在点击Saved后将该多边形的新更新发送到localStorage。

我知道我可以使用setgeometry事件，而且我目前正在使用它来检测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

P.S。您当前可以使用鼠标右键单击从地图中删除/删除多边形。但是一旦我点击了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();

Answer 1

我没有花费大量时间阅读您的代码，而且我没有意识到使用两层而不是一层。通过一些console.log()语句，我意识到您始终将drawLayer保存到localStorage，这就是您错过保存/更新数据的原因。

我将您的jsfiddle HERE 分叉，并在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');
            }
        });
    };
}

如何使用Google Maps API在localStorage中使用新几何图形替换旧几何图形？

1 个答案: