場景

Openlayers中加載Geoserver切割的EPSG:900913離線瓦片地圖并顯示：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118492511

在上面加載離線瓦片地圖顯示的基礎(chǔ)上，需要根據(jù)起點(diǎn)和終點(diǎn)兩個(gè)坐標(biāo)實(shí)現(xiàn)添加一條紅色直線。

實(shí)現(xiàn)效果如下

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

首先添加一個(gè)線的圖層和數(shù)據(jù)源

??????? //線的數(shù)據(jù)源var drwaSource = new ol.source.Vector({wrapX: false})//線的圖層var lineVector = new ol.layer.Vector({source: self.drwaSource});

然后把這個(gè)圖層加到Map的layers中，將其放在地圖圖層的后面，這樣就能將線的圖層顯示在地圖圖層的上面

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

最后調(diào)用和實(shí)現(xiàn)畫線的方法

??????? //調(diào)用畫線方法this.drawLine();/*** 畫線* */function drawLine() {let self = this//設(shè)置起點(diǎn)與終點(diǎn)let pointData = [[-11552950.121001685, 5541420.669119255],[-11550625.369728798, 5537731.388605149]]//下邊來添加一線featurevar feature = new ol.Feature({type: 'lineStyle',geometry: new ol.geom.LineString(pointData // 線的坐標(biāo))})//設(shè)置線的樣式let lineStyle = new ol.style.Style({stroke: new ol.style.Stroke({color: 'red',width: 4})})// 添加線的樣式feature.setStyle(lineStyle)// 添加線的fatureself.drwaSource.addFeature(feature)}

其中pointData就是設(shè)置畫直線的起點(diǎn)和終點(diǎn)。

Feature類是Vector類用來在地圖上展示幾何對(duì)象，是Vector圖層類一個(gè)屬性。這個(gè)屬性是個(gè)要素?cái)?shù)組。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。