OpenLayers 的一些遗憾

Demo 源码下载地址：https://download.csdn.net/download/amd642800/19259543

最近使用 OpenLayers 加载离线地图瓦片做离线地图，由于需要绘制车辆行驶轨迹，因此涉及到路径线条上绘制方向箭头，而官方文档的 DEMO 只有在节点上绘制方向箭头，从视觉上看起来很 LOW ！

因此，在深入研究完文档之后，打算自己撸一个出来，下面是最终效果，还可以设置透明度，个人感觉和百度、搞的的差不多，缩放的时候也会自动根据比例缩放。

原理

使用 OpenLayers（下面简称 OL）提供的 API 接口，可以让 OL 在每次绘制图形的时候，就调用一次自定义函数（函数返回样式），从而设定自己需要的样式。

在自定义函数中辨别几何体为线条，并添加样式点（点图形为箭头）；

按照以上原理，我们就可以开始实际编码。

编码

实际上我们只需编写一个样式回调函数 arrowsStyle(featrue, res) -> ol.style.Style 即可
具体看以下代码和注释

/*** 内部箭头样式* 用于每次渲染集合体的时候，OL 均会调用此函数以获得自定义样式* @param feature* @param res* @returns {undefined[]}*/
const arrowStyles = function (feature, res) {let geometry = feature.getGeometry();let styles = defaultStyles();// 如果几何体不是线条，这返回默认样式if (!(geometry instanceof ol.geom.LineString)) return styles;// 得到线条长度const length = geometry.getLength();// 内部箭头间隔距离（像素）const step = 50;// 将间隔像素距离转换成地图的真实距离// res 是 OL 自动传入的地图比例系数const geoStep = step * res;// 得到一共需要绘制多少个 箭头const arrowNum = Math.floor(length / geoStep);const rotations = [];const distances = [0];// 分割线条，将折线根据坐标进行分割，并遍历// 回调函数将传入开始坐标和结束坐标// 利用开始距离和结束距离，得到每段线条的距离和方向信息geometry.forEachSegment(function (start, end) {let dx = end[0] - start[0];let dy = end[1] - start[1];let rotation = Math.atan2(dy, dx);distances.unshift(Math.sqrt(dx ** 2 + dy ** 2) + distances[0])rotations.push(rotation);});// 利用之前计算得到的线段矢量信息，生成对应的点样式塞入默认样式中// 从而绘制内部箭头for (let i = 1; i < arrowNum; ++i) {const arrowCoord = geometry.getCoordinateAt(i / arrowNum);const d = i * geoStep;const grid = distances.findIndex(x => x <= d);styles.push(new ol.style.Style({geometry: new ol.geom.Point(arrowCoord),image: new ol.style.Icon({src: 'arrow-icon.png',opacity: .5,anchor: [.5, 0.5],rotateWithView: true,// 读取 rotations 中计算存放的方向信息rotation: -rotations[distances.length - grid - 1],scale: .06}),}));}return styles;
}

使用样式

// 数据源（用于添加集合图形）
const source = new ol.source.Vector();
// 地图层（一个显示层，数据源使用 source, 样式使用 arrowStyle
// 因此之后操作仅需对 source 进行添加操作即可
const vector = new ol.layer.Vector({source,// 在这里 将 arrowStyles 添加到本层样式中// 每次 OL 绘制图形，均会调用此函数以获取 Stylestyle: arrowStyles,
});

最终效果如下图：

源码地址：https://download.csdn.net/download/amd642800/19259543

OpenLayers 带内部箭头的线条绘制相关推荐

arcgis for android: 绘制带流向箭头的线
arcgis for android: 绘制带流向箭头的线需求描述项目中需要绘制如下图所示的线,但arcgis for android中linesymbol只提供了单箭头/颜色/实虚线等简单配置项 ...
R语言使用rnorm函数生成正太分布数据、使用plot函数可视化折线图、使用arrows函数在可视化图像中绘制箭头曲线、绘制带箭头线段，可以设置箭头角度，有几个箭头（1起点箭头、2终点箭头，3双箭头）
R语言使用rnorm函数生成正太分布数据.使用plot函数可视化折线图.使用arrows函数在可视化图像中绘制箭头曲线.绘制带箭头线段,可以设置箭头角度,有几个箭头(1起点箭头.2终点箭头,3双箭头) ...
UML类图中各种箭头和线条的含义和用法（转）
UML类图中箭头和线条的含义和用法 1.UML中关系本节向大家学习一下UML箭头.线条代表的意义,UML中关系主要有依赖,聚合,合成,泛化和实现等,下面就让我们来看一下这些关系如何用UML箭头和线条 ...
用gif图展示UML中箭头和线条的含义，及搞懂UML类图、时序图和用例图
前言新进入一家公司,应对日常的软件开发工作和交流,要能看懂别人写的代码各个类之间的关系,那就需要您能看懂类图uml中各个类之间的线条.箭头代表什么意思? UML的类图中,一共有以下六大关系: 泛化 ...
chemdraw怎么画拐弯的箭头_怎么样绘制弧形箭头？
原标题:怎么样绘制弧形箭头? 多数用户知道可以利用ChemDraw Prime 15的箭头工具来绘制弧形箭头,但是不知道ChemDraw最新版的笔工具也是可以绘制箭头的.使用箭头工具可以绘制固定弧度的 ...
python方差分析误差棒_一文讲透，带你学会用Python绘制带误差棒的柱状图和条形图...
Python数据可视化,作为数据常用的必备技能,是目前大数据和数据分析的一个热门,而matplotlib库作为Python中最为常用和经典的二维绘图库,受到了很多人的青睐,最近已经和大家共同探讨了多种 ...
带内部参考电压（VREFINT）校正的STM32 DMA 内置温度采集
笔者今天来介绍一下STM32ADC内置温度的采集,重点是通过内置参考电压来避免ADC参考电压VDDA对温度ADC采集的影响. 1.STM32ADC简介 stm32F4系列ADC,逐次趋近型AD.1 ...
[Canvas系列]Canvas简单线条绘制_02
在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在Canvas中也是如此. 在开始之前我们先拿出画布和画笔: 1 2 var cvs = document. getElementByI ...
GC8871一款带内部电流感测功能的刷式直流电机驱动芯片（可替代DRV8871）
GC8871是一款带内部电流感测功能的刷式直流电机驱动芯片, 适用于打印机.电器.工业设备以及其他小型机器.两个逻辑输入控制 H 桥驱动器, 该驱动器由四个NMOS组成, 能够以高达3.6A 的峰值电 ...

OpenLayers 带内部箭头的线条绘制

OpenLayers 的一些遗憾

原理

编码

OpenLayers 带内部箭头的线条绘制相关推荐

最新文章

热门文章