OpenLayers3绘制线条

素颜马尾好姑娘i 2021-11-26 14:54 561阅读 0赞

# 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。

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

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

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

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