場景

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]]//下邊來添加一線featurevar 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)// 添加線的fatureself.drwaSource.addFeature(feature)}

其中pointData就是設置畫直線的起點和終點。

Feature類是Vector類用來在地圖上展示幾何對象，是Vector圖層類一個屬性。這個屬性是個要素數組。

總結

以上是生活随笔為你收集整理的Openlayers中实现地图上添加一条红色直线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。