场景
Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示:
在上面加载离线瓦片地图显示的基础上,需要根据起点和终点两个坐标实现添加一条红色直线。
实现效果如下
注:
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
首先添加一个线的图层和数据源
//线的数据源
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