场景
Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118492511
在上面加载离线瓦片地图显示的基础上，需要根据起点和终点两个坐标实现添加一条红色直线。
实现效果如下
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
首先添加一个线的图层和数据源
//线的数据源 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图层类一个属性。这个属性是个要素数组。