3.保存绘制后的数据，重新进入显示在地图上

tx3.gif

内容需要用到之前封装的IndexedDB,用IndexedDB来保存数据。
主要内容：

1. 将绘制的图元保存。

2. 页面加载时，将保存的数据展示出来。

3. 保存绘制的图元。
   在原有的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);
}

2. 加载保存的数据。
   查询数离线数据，将离线数据展示在绘制层上，_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);
    });
}

注

1. 图形数据是转化为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);
}

2. 存储时，必须OID键，且唯一，所以Uid生成唯一ID，实现如下：

/**
 * 获取一个随机值
 */
function Uid(){
    return Math.ceil(Math.random() * 100000) + '' +  Date.now();
}