tx3.gif
內(nèi)容需要用到之前封裝的IndexedDB,用IndexedDB來(lái)保存數(shù)據(jù)爷光。
主要內(nèi)容：
將繪制的圖元保存。
頁(yè)面加載時(shí)澎粟，將保存的數(shù)據(jù)展示出來(lái)蛀序。
保存繪制的圖元。
在原有的offlineDrawEqument方法中增加drawend事件活烙，用于繪制完之后保存feature.
/**
* 離線(xiàn)繪制設(shè)備
* @param {String} p_type 繪制的圖元類(lèi)型
*/
var draw;
function offlineDrawEqument(p_type){
draw = new ol.interaction.Draw({
source: _vectorSource,
type: "Point"
});
//繪制完后保存起來(lái)
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);
}
- 加載保存的數(shù)據(jù)重贺。
查詢(xún)數(shù)離線(xiàn)數(shù)據(jù)，將離線(xiàn)數(shù)據(jù)展示在繪制層上，_vectorSource繪制層的source气笙。
/**
* 加載離線(xiàn)的圖元
*/
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);
});
}
注
- 圖形數(shù)據(jù)是轉(zhuǎn)化為WKT存儲(chǔ)在IndexedDB中的次企。所以 readWKT、formatWKT 兩個(gè)工具方法實(shí)現(xiàn)如下：
/**
* 將feature 轉(zhuǎn)化為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);
}
- 存儲(chǔ)時(shí)潜圃，必須OID鍵缸棵，且唯一，所以Uid生成唯一ID谭期，實(shí)現(xiàn)如下：
/**
* 獲取一個(gè)隨機(jī)值
*/
function Uid(){
return Math.ceil(Math.random() * 100000) + '' + Date.now();
}
