OpenLayers3绘制线条

本文适合能够使用openlayers3创建layer图层的开发者，并且本文使用的是vue.js进行开发，如果使用其他前端语言请自行更改。

创建Layer的方法，其中包括如何获取线段经过的点，并保存下来。

getPlanLayer() {
    const that = this;
    const layer = new Vector({
        source: new VectorSource({
        	features: [],
        }),
        style: [
            new Style({
                stroke: new Stroke({
                    color: 'red',
                    width: 2,
                    lineDash:[1,2,3,4,5,6], // 绘制虚线
                }),
            }),
            new Style({
                geometry: function(feature) {
                    let coordinates = feature.getGeometry().getCoordinates(); // 获取线段经过的点
                    if (that.planCurrentPoint.length === 0) {
                        const first = [...coordinates ];
                        that.planCurrentPoint.push(first);
                    } else {
                        let is_push = false;
                        for (let i = 0; i < that.planCurrentPoint.length; i++) {
                            let out = false;
                            if( // 这里认为线段的头和尾的坐标完全相同为同一线段，需要替换
                                that.planCurrentPoint[i][0][0] === coordinates[0][0] &&
                                that.planCurrentPoint[i][0][1] === coordinates[0][1] &&
                                that.planCurrentPoint[i][that.planCurrentPoint[i].length-1][0] === coordinates[coordinates.length-1][0] &&
                                that.planCurrentPoint[i][that.planCurrentPoint[i].length-1][1] === coordinates[coordinates.length-1][1]
                            ){
                                that.planCurrentPoint[i] = [ ...coordinates ];
                                out = true
                            }
                            if (out) {
                                is_push = false;
                                break;
                            }
                            if (i === that.planCurrentPoint.length - 1) {
                            	is_push = true;
                            }
                        }
                        if (is_push) {
                            const data = [ ...coordinates ];
                            that.planCurrentPoint.push(data)
                        }
                    }
                    return new MultiPoint(coordinates);
                }
            })
        ],
        zIndex:996,
        renderMode: 'image',
        renderBuffer: 100
    });
    return layer;
},

创建Draw，Modify以及Snap。

const planLayer = this.map.getLayers().array_[4]; //4代表layers中的第5个layer
planLayer.getSource().clear();
planLayer.setZIndex(1000);
if (this.lineDraw === null) {
    this.lineDraw = new Draw({
        source: planLayer.getSource(),
        type: 'LineString',
        // freehand: true, // 禁止使用直线
    });
}
this.map.addInteraction(this.lineDraw);
if (this.modify === null) {
	this.modify = new Modify({source: planLayer.getSource(),});
}
// modify为了能够修改线条
this.map.addInteraction(this.modify);
if (this.snap === null) {
    this.snap = new Snap({
    	source: planLayer.getSource()
    });
}
// snap为draw以及modify服务
this.map.addInteraction(this.snap);

创建好以后默认是Draw和Modify模式，下面介绍如何退出这些模式以及重新进入

drawAndModifyActive(type) { // type为true或者false表示激活或者禁止
    if (this.lineDraw !== null) {
    	this.lineDraw.setActive(type);
    }
    if (this.modify !== null) {
    	this.modify.setActive(type);
    }
}

那么如何通过已有点进行默认线条的绘制呢？请继续往下看

const planLayer = this.map.getLayers().array_[4];
planLayer.getSource().clear();
planLayer.setZIndex(999);
let currentPoints = [];
for (let i = 0; i < data.length; i++) { // 保存的点必定为EPSG:4326的
    if (currentPoints.length < data[i].current_draw_time){
        const newArray = [];
        currentPoints.push(newArray);
    }
    if(data[i].current_draw_time === data[i].current_draw_time) {
        currentPoints[data[i].current_draw_time - 1].push((this.projection == 'EPSG:4326') ? [data[i].longitude, data[i].latitude] : transform([data[i].longitude, data[i].latitude], 'EPSG:4326', this.projection),)
    }
}
for (const value of currentPoints) {
    const geometryData = new LineString(value); //将点赋予给LineString令其去绘制路线
    let line = new Feature({
    	geometry: geometryData
    });
    planLayer.getSource().addFeature(line);
    this.map.render();
}

这样就可以通过数据库保存的点进行默认绘制了，并且与Draw出来的并无差别。