Openlayers中實現地圖上添加一條紅色直線

場景

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圖層類一個屬性。這個屬性是個要素數組。