tx3.gif
内容需要用到之前封装的IndexedDB,用IndexedDB来保存数据。
主要内容：
将绘制的图元保存。
页面加载时，将保存的数据展示出来。
保存绘制的图元。
在原有的offlineDrawEqument方法中增加drawend事件，用于绘制完之后保存feature.
/**
* 离线绘制设备
* @param {String} p_type 绘制的图元类型
*/
var draw;
function offlineDrawEqument(p_type){
draw = new ol.interaction.Draw({
source: _vectorSource,
type: "Point"
});
//绘制完后保存起来
draw.on('drawend',function(evt){
var _feature = evt.feature;
console.log(_feature);
var item = {OID: Uid(), SHAPE: formatWKT(_feature)};
db.add(TX_TABLE, item, function(evt){
if(event.type == "error") {
console.log("添加失败！")
} else {
console.log("添加成功！");
}
});
console.log(item);
});
map.addInteraction(draw);
}
- 加载保存的数据。
查询数离线数据，将离线数据展示在绘制层上，_vectorSource绘制层的source。
/**
* 加载离线的图元
*/
function loadOfflineFeatures(){
db.query(TX_TABLE,{},function(result){
console.log(result);
var _features = [];
for(var i = 0; i < result.length; i++){
var item = result[i];
var feature = readWKT(item['SHAPE']);
feature.setProperties(item);
_features.push(feature);
}
_vectorSource.addFeatures(_features);
});
}
注
- 图形数据是转化为WKT存储在IndexedDB中的。所以 readWKT、formatWKT 两个工具方法实现如下：
/**
* 将feature 转化为WKT
*/
var WKTFORMAT;
function formatWKT(p_feature){
var feature = p_feature;
if(!WKTFORMAT) {
WKTFORMAT = new ol.format.WKT();
}
return WKTFORMAT.writeFeature(feature);
}
/**
* 读取WKT
* @param {Object} p_wkt
*/
function readWKT(p_wkt){
if(!WKTFORMAT) {
WKTFORMAT = new ol.format.WKT();
}
return WKTFORMAT.readFeatureFromText(p_wkt);
}
- 存储时，必须OID键，且唯一，所以Uid生成唯一ID，实现如下：
/**
* 获取一个随机值
*/
function Uid(){
return Math.ceil(Math.random() * 100000) + '' + Date.now();
}
