4.在map中绘制一条通道

主要内容是在map中绘制一条线路通道

1. 添加Draw的style="LineString"
2. 保存绘制后的数据，重新加载时显示出来。
3. 为LineString添加显示样式。

注意

本章代码是在之前的代码基础上修改，参照之前的文章。

修改Draw

offlineDrawEqument

    var _type = "LineString";       //Point
    draw = new ol.interaction.Draw({
        source: _vectorSource,
        type: _type 
    });

draw的end事件没有改变。

完善样式

/**
 * 添加绘制层的样式
 * @param {Object} p_feature
 */
function drawLayerStyle(p_feature){
    var _feature = p_feature;
    var geometry = _feature.getGeometry();
    var type = geometry.getType();
    var styles = null;
    
    if("LineString" == type) {
        var view = map.getView();
        var projection = view.getProjection();
        var meterPerUnit = projection.getMetersPerUnit();
        var resolution = view.getResolution();
        var _rotation = null;
        
        //线路旋转角度
        geometry.forEachSegment(function(start, end){
            var dx = end[0] - start[0];
            var dy = end[1] - start[1];
            _rotation = (  ( Math.atan2(dy, dx) - Math.PI) * 180) / Math.PI;
        });
        var extent = geometry.getExtent();
        var pointCoord = toCenter(extent);      
        var distance = ol.sphere.getDistance([Math.min(extent[0], extent[2]),Math.min( extent[1], extent[3])],[ Math.max(extent[2],extent[0]), Math.max(extent[1], extent[3])]);
        var scale =  distance / (resolution * meterPerUnit * 32);
        var pixels = distance / (resolution * meterPerUnit);
        
        var num = Math.round(scale) + 1;
        var sep = (1 / num).toFixed(10);
        styles = [];
        
        if(num < 2) {       
            styles.push(new ol.style.Style({        // 与线串的各个子线段对应的样式
                geometry: new ol.geom.Point(geometry.getCoordinateAt(0.5)),
                image: new ol.style.Icon({
                    src: "../meta/07010010.svg",// + img,
                    size: [32, 32],
                    rotateWithView: true,       // 与地图视图一起旋转  设置子线段箭头图标样式的角度
                    rotation: (Math.PI) -  (Math.PI  * _rotation) /  180.0         // 因为角度以顺时针旋转为正值，所以前面添加负号
                }),
            }));        
        } else {
            for(var i = 0; i < num; i++ ){
                var _sep = sep * i; 
                styles.push(new ol.style.Style({        // 与线串的各个子线段对应的样式
                geometry: new ol.geom.Point(geometry.getCoordinateAt( _sep )),
                image: new ol.style.Icon({
                    src: "../meta/07010010.svg",// + img,
                    anchor: [0,0.5],
                    size: [32, 32], 
                    rotateWithView: true,       // 与地图视图一起旋转  设置子线段箭头图标样式的角度
                    rotation: (Math.PI) -  (Math.PI  * _rotation) /  180.0         // 因为角度以顺时针旋转为正值，所以前面添加负号
                }),
            })); 
            }
        }
    } else if("Point" == type) {
        styles = new ol.style.Style({    
            image: new ol.style.Icon({
                src: '../meta/gt/02020071.svg',
                size: [32,32],
            }),
            text: new ol.style.Text({
                text: "11"
            })
        }); 
    }
    
        
    return styles;
}

部分代码已经在之前写过了，就没有重复粘贴。请参见：

1. 3.保存绘制后的数据，重新进入显示在地图上
2. 2.绘制点图，并增加样式