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

<!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. js-工具方法（持续更新）

    /* * @Author: lingxie * @Date: 2020-06-04 13:57:07 * @Descripttion: */ // 是否邮箱 export const isEmail ...

  2. Vulnhub:Five86-2靶机

    kali:192.168.111.111 靶机:192.168.111.211 信息收集 端口扫描 nmap -A -v -sV -T5 -p- --script=http-enum 192.168. ...

  3. 图论专题 - LibreOJ

    第三部分 图论 第 1 章 最小生成树 #10064 「一本通 3.1 例 1」黑暗城堡#10065 「一本通 3.1 例 2」北极通讯网络 #10066 「一本通 3.1 练习 1」新的开始#100 ...

  4. FTCL：Fine-grained Temporal Contrastive Learning for Weakly-supervised Temporal Action Localization概述

    1.针对的问题 现有的方法主要遵循于通过优化视频级分类目标来实现定位的方式,这些方法大多忽略了视频之间丰富的时序对比关系,因此在分类学习和分类-定位自适应的过程中面临着极大的模糊性.(1)在弱监督设置 ...

  5. 2023 年 CCF 春季测试赛模拟赛 - 2 题解

    T1 约数和 标准解法 \(n = a_1^{b_1} \times a_2^{b_2} \dots a_k^{b_k}\) 那么根据算术基本定理的推广,约数个数和约数和都是可以快速计算得到 约数和 ...

  6. maven发布到本地仓库

    <distributionManagement> <repository> <id>localRepository</id> <url>fi ...

  7. 在IIS上同站点部署多个程序操作步骤

    1.打开IIS管理器: 2.右击选中"网站",选择"添加网站":输入网站名称.路径.IP地址等信息: 3.确定后并访问网站: 部署后可能会因为框架不支持导致报错 ...

  8. C# Post调用接口并传递json参数

    1 public string Post(string Url, string jsonParas) 2 { 3 string strURL = Url; 4 //创建一个HTTP请求 5 HttpW ...

  9. perlist

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...

  10. golang流程控制if，switch分支

    if 分支 if 单分支 if 条件表达式 { 逻辑代码 } package main import "fmt" func main() { //var a int = 9 //i ...