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

ゞ浴缸里的玫瑰 2022-10-19 04:10 429阅读 0赞

# 场景 #

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/118492511][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118492511]

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

实现效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][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图层类一个属性。这个属性是个要素数组。

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118492511]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118492511
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221005/e585aba384af4164b7930dab169f9d53.png
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi