绘制带箭头的线，计算相对复杂，多少是有点影响性能了。更简单的做法：初始、目标点用不同的点进行强调即可。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

    <link href="ol/ol.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="ol/ol.js" charset="utf-8"></script>

</head>

<body>

<div id="map" style="width: 100%;height: 100%"></div>

<script>

    var layerVector = new ol.layer.Vector({

        source: new ol.source.Vector()

    });

    var map = new ol.Map({

        layers: [

            new ol.layer.Tile({

                source: new ol.source.OSM(),

            })

            , layerVector

        ],

        target: 'map',

        view: new ol.View({

            center: [12950000, 4860000],

            zoom: 7

        })

    });

    /**

     *  采用闭包的写法，封装一个style

     * @param resolution 比例尺（跟比例尺相关的一个量，暂不明确具体是什么）

     * @returns {[*]}

     */

    var featureStyles = function (resolution) {

        let feature = this;

        let geometry = feature.getGeometry();

        let styles = [

            new ol.style.Style({

                stroke: new ol.style.Stroke({

                    color: 'green',

                    width: 8

                })

            })

        ];

        /**

         * 根据两个点的坐标，找出中间值，在中间绘制箭头图标，并且根据两个点，确定图标的角度

         *

         * @param start 开始的点

         * @param end 结束的点

         */

        function draw(start, end) {

            let arrowLonLat = [(parseFloat(end[0]) + parseFloat(start[0])) / 2, (parseFloat(end[1]) + parseFloat(start[1])) / 2];

            let dx = parseFloat(end[0]) - parseFloat(start[0]);

            let dy = parseFloat(end[1]) - parseFloat(start[1]);

            //旋转角度计算

            let rotation = Math.atan2(dy, dx);

            feature.set("inRotation", rotation);

            //设置图标

            styles.push(new ol.style.Style({

                geometry: new ol.geom.Point(arrowLonLat),

                image: new ol.style.Icon({

                    src: 'img/routearrow.png',

                    anchor: [0.75, 0.5],

                    size: [8, 8],

                    rotateWithView: true,

                    rotation: -rotation

                })

            }));

        }

        /**

         * 取a/b两个点的n等分点

         * @param n 分母

         * @param m 分子

         * @param p1 a点

         * @param p2 b点

         * @returns {*[]}

         */

        function dividedPoint(n, m, p1, p2) {

            return [(p2[0] - p1[0]) / n * m + p1[0], (p2[1] - p1[1]) / n * m + p1[1]]

        }

        /**

         * 遍历所有的点

         */

        geometry.forEachSegment(function (start, end) {

            //求两点之间的距离，勾股定理的应用

            let res = Math.sqrt(Math.pow(Math.abs(end[1] - start[1]), 2) + Math.pow(Math.abs(end[0] - start[0]), 2));

            if (res !== 0) {

                //根据比例尺，算出两点之间需要绘制的箭头数量，下面的50是通过测试，获得的用户体验较好的一个值

                let n = Math.ceil(res / 50 / resolution);

                let pre = start;

                //从第一个点开始绘制，直到绘制完所有的箭头

                let m = 1;

                while (m <= n) {

                    let next = dividedPoint(n, m, start, end);

                    draw(pre, next);

                    pre = next;

                    m++;

                }

            }

        });

        return styles;

    };

    //一条线段

    var pointFeature2 = new ol.Feature({

        geometry: new ol.geom.LineString([[0, 0], [12950000, 4760000], [12850000, 4760000]])

    });

    //设置样式

    pointFeature2.setStyle(featureStyles);

    layerVector.getSource().addFeature(pointFeature2);

</script>

</body>

</html>

OpenLayer——绘制带箭头的线的更多相关文章

  1. AE常用代码（标注要素、AE中画带箭头的线、如何获得投影坐标、参考坐标、投影方式、FeatureCount注意事项）

    手上的电脑已经用了将近三年了,想入手一台Surface Pro,所以计划着把电脑上的资料整理下,部分资料打算发到博客上来,资料有同事.也有自己的.也有来自网络的,来源途径太多,也没法详细注明,请见谅! ...

  2. 如何在 Matlab 中绘制带箭头的坐标系

    如何在 Matlab 中绘制带箭头的坐标系 如何在 Matlab 中绘制带箭头的坐标系 实现原理 演示效果 完整代码 实现原理 使用 matlab 的绘制函数时,默认设置为一个方框形的坐标系, 图1 ...

  3. 如何利用百度地图JSAPI画带箭头的线？

    百度地图JSAPI提供两种绘制多折线的方式,一种是已知多折线经纬度坐标串通过AddOverlay接口进行添加:另一种是通过在地图上鼠标单击进行绘制(鼠标绘制工具条库).目前这两种方式只能绘制多折线,并 ...

  4. Turtle绘制带颜色和字体的图形（Python3）

    转载自https://blog.csdn.net/wumenglu1018/article/details/78184930 在Python中有很多编写图形程序的方法,一个简单的启动图形化程序设计的方 ...

  5. iOS重写drawRect方法实现带箭头的View

    创建一个UIView的子类,重写drawRect方法可以实现不规则形状的View,这里提供一个带箭头View的实现代码: ArrowView.h #import <UIKit/UIKit.h&g ...

  6. Leaflet 带箭头轨迹以及沿轨迹带方向的动态marker

    前面写了篇文章,mapboxgl实现带箭头轨迹线,介绍了如何基于mapboxgl实现类似高德地图导航轨迹效果. 下图是我基于leaflet实现的效果. 接下来分享一下在我基于leaflet实现该效果时 ...

  7. css实现带箭头选项卡

    这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...

  8. 百度地图API绘制带头箭头的折线

    源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  9. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  10. WebGL绘制有宽度的线

    WebGL中有宽度的线一直都是初学者的一道门槛,因为在windows系统中底层的渲染接口都是D3D提供的,所以无论你的lineWidth设置为多少,最终绘制出来的只有一像素.即使在移动端可以设置有宽度 ...

随机推荐

  1. 原子类Atomic

    前言 非阻塞算法:如果在某种算法中,一个线程的失败或挂起不会导致其他线程也失败或挂起,那么这种算法就被称为非阻塞算法.如果在算法的每个步骤中都存在某个线程执行下去,那么这种算法也被称为无锁(Lock_ ...

  2. Gateway集成Netty服务

    目录 一.Netty简介 二.Netty入门案例 1.服务端启动 2.通道初始化 3.自定义处理器 4.测试请求 三.Gateway集成 1.依赖层级 2.自动化配置 四.配置加载 1.基础配置 2. ...

  3. kotlin学习-Coroutines(协程)

    协程(又名纤程),轻量级线程(建立在线程基础上,属于用户态调用),非阻塞式编程(像同步编写一样),在用户态内进行任务调度,避免与内核态过多交互问题,提高程序快速响应.协程使用挂起当前上下文替代阻塞,被 ...

  4. 钉钉h5开发流程

    1.先在钉钉开发者后台 https://login.dingtalk.com/oauth2/challenge.htm?redirect_uri=https%3A%2F%2Fopen-dev.ding ...

  5. docker配置文件模板

    { "registry-mirrors": [ "https://bxsfpjcb.mirror.aliyuncs.com" ], "max-conc ...

  6. server2008 安装mongodb

    1.下载指定版本 3.6.23  zip压缩文件 ,似乎高版本已经不支持在server2008了! 下载地址:https://www.mongodb.com/try/download/communit ...

  7. 创建一个与a.txt文件同目录下的另一个文件b.txt

    File file1 = new("d:\\a\\a.txt"); File file2 = new(file1.getParent(),"b.txt"): F ...

  8. chrome 检查更新时出错：无法启动更新检查（错误代码为 4: 0xA0430817 -- system level）

    Windows系统谷歌浏览器 Chrome 检查更新时出错:无法启动更新检查(错误代码为 4: 0x80070005 -- system level)该怎么办? 这很有可能是 Chrome 更新服务被 ...

  9. 创建maven项目时，IntelliJ IDEA2019出现：Unable to import maven project: See logs for details 报错

    开发环境:IntelliJ IDEA 2019.1.3 + Maven3.6.3 报错截图 主要原因 IntelliJ IDEA 2019.1.3 与 Maven3.6.3 不兼容问题 解决方案 将m ...

  10. web基础(5): CSS3介绍

    chapter5 CSS3 新性能 (一)圆角边框与阴影 1.border-radius属性 例1 border-top-left-radius:40px 20px ; 两个值分别表示水平方向.垂直方 ...