Openlayers中实现地图上添加一条红色直线

场景

Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示：

在上面加载离线瓦片地图显示的基础上，需要根据起点和终点两个坐标实现添加一条红色直线。

实现效果如下

 

注：

关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先添加一个线的图层和数据源

//线的数据源
        var drwaSource = new ol.source.Vector({
            wrapX: false
        })

        //线的图层
        var lineVector = new ol.layer.Vector({
            source: self.drwaSource
        });

然后把这个图层加到Map的layers中，将其放在地图图层的后面，这样就能将线的图层显示在地图图层的上面

//Map Openlayers的核心组件，包含图层、交互事件、UI控制元素等。
        var map = new ol.Map({
            layers: [layer, lineVector],
            target: 'map',
            view: view
        });

最后调用和实现画线的方法

//调用画线方法
        this.drawLine();

        /**
         * 画线
         * */
        function drawLine() {
            let self = this
            //设置起点与终点
            let pointData = [
                [-11552950.121001685, 5541420.669119255],
                [-11550625.369728798, 5537731.388605149]
            ]
            //下边来添加一线feature
            var feature = new ol.Feature({
                type: 'lineStyle',
                geometry: new ol.geom.LineString(
                    pointData // 线的坐标
                )
            })
            //设置线的样式
            let lineStyle = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 4
                })
            })
            // 添加线的样式
            feature.setStyle(lineStyle)
            // 添加线的fature
            self.drwaSource.addFeature(feature)
        }

其中pointData就是设置画直线的起点和终点。

Feature类是Vector类用来在地图上展示几何对象，是Vector图层类一个属性。这个属性是个要素数组。