[英]How to replace old geometry with new geometry in localStorage using Google Maps API?
I have 2 data layers on my Google Map: savedLayer
(used for displaying/loading saved data on the map), and drawLayer
(used for drawing on the map). 我的Google Map上有2个数据层: savedLayer
(用于在地图上显示/加载已保存的数据)和drawLayer
(用于在地图上绘制)。
I'm currently able to store a drawn polygon on the map in localStorage using the Save button, and then display it on the map from localStorage. 目前,我可以使用“保存”按钮将绘制的多边形存储在localStorage中的地图上,然后通过localStorage在地图上显示该多边形。
What I'm struggling with is updating localStorage with any changes that are made to a particular polygon afterwards. 我正在努力的是在之后对特定多边形进行的任何更改来更新localStorage。 Let's say you draw 3 or 4 polygons (I assign unique IDs to them). 假设您绘制了3或4个多边形(我为其分配了唯一的ID)。 How do I update the geometry in localStorage for the selected polygon? 如何为所选多边形更新localStorage中的几何? How do I remove it? 如何删除它? I basically want to send new updates of that polygon to localStorage once Saved is clicked. 我基本上想在单击“保存”后将该多边形的新更新发送到localStorage。
I know there's a setgeometry
event that I can use, and I'm currently using that to detect when the a geometry in savedLayer
changes, but am struggling with replacing the old geometry with the new one: 我知道有一个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 JSFiddle- http://jsfiddle.net/h0f3ycf4
PS You can currently delete/remove polygons from map using right-click on your mouse. PS您当前可以使用鼠标右键单击从地图上删除/删除多边形。 But once I hit Save, this change is not reflected in localStorage. 但是,一旦我点击“保存”,此更改将不会反映在localStorage中。
Full JS: 完整的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();
I didn't spend a lot of time to read your code and I didn't get the point of using two layers instead of one layer. 我没有花很多时间来阅读您的代码,也没有得到使用两层而不是一层的意义。 With some console.log()
statements I realized that you are always saving drawLayer
to localStorage
and that's why you miss saved/updated data. 通过一些console.log()
语句,我意识到您总是将drawLayer
保存到localStorage
,这就是为什么您错过保存/更新的数据的原因。
I forked your jsfiddle HERE and did small modifications in savePolygons()
method and seems that it is working now as expected. 我叉你的jsfiddle 这里和做了小的修改savePolygons()
方法,似乎它现在按预期工作。
In short words I make sure that I'm saving the data from drawLayer
and savedLayer
to localStorage
so we don't miss anything. 简而言之,我确保将数据从drawLayer
和savedLayer
到localStorage
这样我们就不会丢失任何内容。
Just for reference: 仅供参考:
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');
}
});
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.