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

<!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. Abp+Vue iis发布报错 HTTP Error 500.30 - ANCM In-Process Start Failure

    1.项目发布到文件系统 2.IIS设置 ABP 如果使用时Net Core 跨平台,它依赖AspNetCoreModuleV2模块(没有的话需要先安装)     下载地址:https://dotnet ...

  2. echart折线图异常多出一条连接线

    开发背景:vue3父传子,父中调子组件echarts图表 问题:第一次进入数据图表正常,再次进入不更新图表数据的情况下,图表异常多出来一条开始到结尾的连接线 原因:上次数据没清空 解决:请求完接口后先 ...

  3. 封装avalonia指定组件允许拖动的工具类

    封装avalonia指定组件允许拖动的工具类 创建Avalonia的MVVM项目,命名DragDemo ,然后将项目的Nuget包更新到预览版 <ItemGroup> <Packag ...

  4. 【磐河旅行】之酒店API接口对接实录

    1.项目需求概述: 通过对接第三方磐河旅行的酒店API接口实现在我们的APP .微信小程序.H5上可提供用户酒店查询.酒店预订.退订等功能.效果如下图: 2.酒店接口功能拆分 除了酒店静态数据字典(如 ...

  5. MySQL联合索引的创建规则

    1.索引应该按照最常用于查询的列的顺序创建.这样可以最大程度地提高查询性能. 2.如果查询中包含的列与索引中的列顺序不一致,则无法使用索引.因此,如果您有多个查询,每个查询都包含不同的列,那么最好为每 ...

  6. pypeeter 自动化

    Pypputeer Puppeteer 是 Google 基于 Node.js 开发的一个工具,而 Pyppeteer 又是什么呢?它实际上是 Puppeteer 的 Python 版本的实现,但它不 ...

  7. 安卓虚拟键盘挡住input框解决办法

    问题描述:ios弹出虚拟键盘的时候会自动将页面顶上去,不会遮住input输入框,而安卓则会挡住. 解决办法: 1.使用如下代码来区分安卓,存入localStorage中 if ((navigator. ...

  8. RxJava2.x的理解与总结

    RxJava2.x的理解与总结 RxJava是一个基于观察者设计模式将链式编程和异步结合在一起的开源库. 链式编程 通过查看GitHub开源项目的简介开源知道,RxJava有几个基类. 他们分别适用于 ...

  9. Appium获取元素坐标

    文章转自:https://www.cnblogs.com/lfr0123/p/13686769.html appium做app自动化测试过程中,有时需要获取控件元素的坐标进行滑动操作.appium中提 ...

  10. 蓝牙mesh组网实践（mesh组网的评估与沁恒蓝牙芯片选型）

    目录 沁恒的组网方式主要有2.4G私有协议组网和BLE mesh组网两大类.2.4G私有协议组网灵活性相对较高,对开发者的要求也相对较高.mesh组网本身有一系列规范,考虑到了可靠性.安全性.功能性等 ...