场景

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]]//下边来添加一线featurevar 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)// 添加线的fatureself.drwaSource.addFeature(feature)}

其中pointData就是设置画直线的起点和终点。

Feature类是Vector类用来在地图上展示几何对象，是Vector图层类一个属性。这个属性是个要素数组。

Openlayers中实现地图上添加一条红色直线相关推荐

在高德地图上添加折线
一条直线有两个端点确定,所以想要在地图上添加一条可展示的直线或折线,需要明确点位的具体经纬度,只需要调用高德api即可完成 1.先获取精准的点位坐标可以通过高德的点击事件获取点击位置的坐标,例如: ...
使用Python调用百度地图的API在地图上添加标记
写在前面近期博主工作太忙,快一个月没更新博客.今天跑了大半天的腿,被一堆破事儿弄的无比憋屈,写篇博客调节一下心情. 博主的目的是在地图上做一些标记,然后保存为html网页文件,这样方便我的软件调用, ...
三维数字沙盘虚拟电子沙盘触摸互动第四十课在地图上添加FrameworkElement
三维电子沙盘数字沙盘大数据人工智能第四十课在地图上添加FrameworkElement 下面介绍怎样在地球上增加自己的FrameworkElement,因为FrameworkElement为WPF ...
04 在地图上添加主页、定位、鹰眼图和比例尺控件
在上一篇文章中我们学习了如何创建一个简单的地图,那接下来,我们学习如何给创建好的地图上添加一些基本的空间,最终效果如下图所示: 由上图可以看出,我们在地图上添加了主页.定位.鹰眼图以及比例尺控件,下面 ...
Echarts在map地图上添加散点图
Echarts在map地图上添加散点图一.需求: 我们使用map地图画出区域后,有时需要标注一些点,就需要用到散点图了,而在series属性中,只能有一个type参数,这时该怎么办呢? 二.实现我 ...
微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...
百度地图之九如何在一个地图上显示多条导航路线
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 如何在一 ...
GIS（二）——在js版搜狗地图上添加brand标牌
在上一篇博文中,我在搜狗地图上添加了Marker标记,但是在用户体验度上还是不够的,如果想了解某些信息,你得把鼠标指向marker,才能看到title里的值.有没有一种可以直接显示在marker上的东 ...
android高德marker添加点击,高德地图上添加marker，给每一个marker添加点击事件。...
高德地图上添加marker,给每一个marker添加点击事件. 高德地图上添加marker,给每一个marker添加点击事件.javascript var watch = [] $.ajax({ ty ...

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

场景

实现

Openlayers中实现地图上添加一条红色直线相关推荐

最新文章

热门文章