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

<!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. P8421 [THUPC2022 决赛] rsraogps

    \(\text{Solution}\) 肯定扫描线在考虑维护什么东西,假设 \(r\) 右移时可以暴力得到所有新值,发现需要维护区间历史版本和以及区间当前值之和 这三个操作对于一个数来说变化次数都是 ...

  2. PE头结构解析（代码实现）

    PE头结构解析(代码实现) 图表实现在:https://www.cnblogs.com/juicyhumberger/articles/17064764.html #include "std ...

  3. OpenLayers多源数据加载

    一.实验内容 栅格瓦片数据加载: 矢量数据加载: 矢量瓦片数据加载. 二.实验步骤 2.1 加载已经封装的在线瓦片地图 <!DOCTYPE html> <html lang=&quo ...

  4. LeetCode-1664 生成平衡数组的方案树

    题目描述 来源:力扣(LeetCode)链接:https://leetcode.cn/problems/ways-to-make-a-fair-array 给你一个整数数组 nums .你需要选择 恰 ...

  5. mac sourceTree 每次操作提示需要密码

    1.在终端(terminal)打开你的工程目录2.输入git config credential.helper store 3.拉取代码git pull

  6. react-native-sortable-list没有渲染数据

    问题如题. 原因是我的order数组为空数组,应该将数组元素补充上.

  7. C# 属性空引用警告

    whereExpression = whereExpression.And(u => u.ValueInterger.ToString() != null &&** u.Valu ...

  8. 【8】java之引用传递

    一.引用传递 ​引用传递是整个 java 的精髓所在 引用传递核心意义:同一块堆内存空间可以被不同的栈内存所指向,不同栈内存可以对同一块堆内存内容进行修改. 范例:第一道引用传递范例 class Me ...

  9. vs2019中添加rdlc的报表设计器

    在Visual studio 2019中,不会默认安装rdlc的报表设计器,所以需要自行添加. 1. 打开VS2019, 找到扩展-->管理扩展 2. 在扩展管理中,点击"联机&quo ...

  10. 2022-05-13内部群每日三题-清辉PMP

    1.一个运营团队认为他们的技能在项目上是不必要的,团队士气低落,且团队成员试图阻止项目实现目标.项目经理应该怎么做? A.建议公司改变战略,并立即停止项目 B.要求工会的支持来激励团队 C.根据项目成 ...