javascript - 无法保存然后恢复图形
问题描述
我sketchViewModel
用于编辑图层。我有一个下一个逻辑:
- 上传基本模型;
- 编辑模型;
- 将编辑模型保存到 localStorage
- 从 localStorage 上传模型。
当我从本地存储上传模型并添加到图形层时,我有错误:
[esri.core.Accessor] Accessor#set Invalid property value, value needs to be one of
'esri.geometry.Extent', 'esri.geometry.Multipoint', 'esri.geometry.Point', 'esri.geometry.Polyline',
'esri.geometry.Polygon', or a plain object that can autocast (having .type = 'extent', 'multipoint',
'point', 'polyline', 'polygon')
[esri.core.Accessor] Accessor#set Invalid property value, value needs to be one of
'esri.symbols.SimpleFillSymbol', 'esri.symbols.PictureFillSymbol', 'esri.symbols.PictureMarkerSymbol',
'esri.symbols.SimpleLineSymbol', 'esri.symbols.SimpleMarkerSymbol', 'esri.symbols.TextSymbol',
'esri.symbols.LabelSymbol3D', 'esri.symbols.LineSymbol3D', 'esri.symbols.MeshSymbol3D',
'esri.symbols.PointSymbol3D', 'esri.symbols.PolygonSymbol3D', 'esri.symbols.WebStyleSymbol',
'esri.symbols.CIMSymbol', or a plain object that can autocast (having .type = 'simple-fill', 'picture-
fill', 'picture-marker', 'simple-line', 'simple-marker', 'text', 'label-3d', 'line-3d', 'mesh-3d',
'point-3d', 'polygon-3d', 'web-style', 'cim')
这是我的代码:
sketchViewModel.on("update", checkGraphicUpdate);
function checkGraphicUpdate(evt) {
if(evt.state === 'complete'){
// dispatchRecentChanges(geometryGraphics);
localStorage.setItem('features', geometryGraphics.toJSON())
}
}
if(uploadView){
graphicsLayer.removeAll();
JSON.parse(localStorage.feautures).forEach(
function(featureJson){
graphicsLayer.add(new Graphic(featureJson))}
);
}
以下是 LocalStorage 中 JSON 元素的示例:
{"geometry":{"spatialReference":{"wkid":4326},"paths":[[[-111.3, 52.68], [-98,
49.5], [-93.94, 29.89]]]},"symbol":{"type":"esriSLS","color":
[0,255,0,255],"width":4,"style":"esriSLSSolid"},"attributes":
{"DATA_SOURSE":"3","AVERAGE_DEPTH":"1.2","MATERIAL":"14","PLACINGFORM":"2","MEAS
UREDLENGTH":"12.4","DIAMETER":"6","STREETNAME":"אבן
עזרא","DIAMETERUNIT":"'אינצ","STATUS":"1","LOCATION":"13","INSTALLYEAR":"2018","
Title":"Water_Pipe_Section [F3FA]","PURPOSE":"1"},"popupTemplate":
{"popupElements":[{"type":"fields","fieldInfos":
[{"fieldName":"DATA_SOURSE","visible":true},
{"fieldName":"AVERAGE_DEPTH","visible":true},
{"fieldName":"MATERIAL","visible":true},
{"fieldName":"PLACINGFORM","visible":true},
{"fieldName":"MEASUREDLENGTH","visible":true},
{"fieldName":"DIAMETER","visible":true},
{"fieldName":"STREETNAME","visible":true},
{"fieldName":"DIAMETERUNIT","visible":true},
{"fieldName":"STATUS","visible":true},{"fieldName":"LOCATION","visible":true},
{"fieldName":"INSTALLYEAR","visible":true},{"fieldName":"Title","visible":true},
{"fieldName":"PURPOSE","visible":true}]}],"title":"{Title}"}}
我了解这是由于存储数据中的错误造成的。但是如何保存这些数据,然后正确提取呢?
解决方案
发生此错误是因为 geometry.type 和 symbol.type 未保存在 JSON 中。解决方案是检查 if((data.symbol ['type'] === "esriSLS")) 然后扩展 new Polyline() 并在 new Graphic() 中明确指定符号:{type: "simple-line"} .
代码:
if (data.symbol['type'] === "esriSLS") {
const {type, fieldInfos} = popupElements[0],
{paths} = geometry;
const pLine = new Polyline({spatialReference, paths});
const symbol = {
type: "simple-line",
width: width,
color: color
};
return new Graphic({
geometry: pLine,
symbol: symbol,
attributes: attributes,
popupTemplate: {
title: "{Title}",
content: [{type, fieldInfos}]
}
});
}
推荐阅读
- crystal-reports - Crystal Reports 中的多个详细信息部分
- date - 显示错误日期的记录器
- bash - 输出 etc/passwd,删除评论并过滤它
- c# - 属性链式绑定在 WPF MVVM 中不起作用
- python - 覆盖一定百分比点的最小可能区域
- php - 样式化使用 php 生成的 html 表
- bash - 命令 PASTE 返回额外的 sumbol (standard_in) 1:bash 中的语法错误
- python - 根据用户输入获取特定行的值作为输出
- jmeter - JMETER->当第一个线程组已经在执行请求时,我们如何启动第二个线程组
- javascript - 在 nodejs (expressjs) 中重构依赖项实例化