首页 > 其他分享 >Openlayers中实现地图上添加一条红色直线

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

时间:2023-03-17 19:01:15浏览次数:40  
标签:直线 ol Vector 添加 Openlayers var new 图层


场景

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

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

实现效果如下

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

 

注:

关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先添加一个线的图层和数据源

//线的数据源
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图层类一个属性。这个属性是个要素数组。

标签:直线,ol,Vector,添加,Openlayers,var,new,图层
From: https://blog.51cto.com/BADAOLIUMANGQZ/6127854

相关文章