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

<!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. XShell 连接 VMware Linux

    如果你的系统是 Ubuntu,并且是精简安装的系统,极大可能使用ifconfig时会提示你安装相关依赖,所以你安装的时候要记得顺带安装 ifconfig: sudo apt install ifcon ...

  2. 2022年冬pat乙级考试题目及代码解析附部分错误原因

    快考pat乙级了,花了十块钱做了一下去年冬天的pat乙级,不难,现在在花ac之后的时间来写文章,默默许愿几天后的也不难,但是我们也要做好准备啊~ B-1 谣言检测仪 分数 15 作者 陈越 单位 浙江 ...

  3. tabs 滑动效果

    https://www.zhangxinxu.com/wordpress/2020/07/css-var-improve-components/ 伪类选择器 https://blog.csdn.net ...

  4. xlwings rest api

    https://pbihub.cn/blog/964/created_at https://docs.xlwings.org/zh_CN/latest/rest_api.html xlwings &g ...

  5. mysql数据库新建用户，并赋予权限

    新建用户: CREATE USER 'testuser'@'LOCALHOST' IDENTIFIED BY '123456'; 赋予权限: grant select on *.* to 'testu ...

  6. EF和dapper

    EF:重量级ORM的代表 优点: 1.不关心sql怎么写, 2.开发速度快,和linq结合,有效提高开发效率 3.code first,代码优先,不用关心数据库结构,代码先行. 4.跨数据库,只需要把 ...

  7. （jmeter笔记）jmeter用正则匹配响应数据，满足两个条件

    方法1.用正则匹配响应数据,满足两个条件 \{[^}]+?"Id":(\d*)[^}]+?"Picking"[^}]+?\} 方法2. \{"Pick ...

  8. html原声启动本地服务器，用http-server启动本地服务器

    第一: 准备node.js环境: 打开cmd,输入:npm install http-server -g 第二: 安装 http-server npm install http-server -g 安 ...

  9. Java中类似c语言的printf

    System.out.printf("%4d",x); printf("%4d",x); 保留小数点后两位也可以用%.2f 相对来说很好记了 回车用\n

  10. Kubernetes--资源注解

    资源注解 除了标签(label)之外,Pod与其他各种资源还能使用资源注解(annotation).与标签类似,注解也是"键值"类型的数据,不过它不能用于标签及挑选Kubernet ...