使用openlayers绘制类似高德地图轨迹线并实现箭头动画效果

已于 2024-08-20 15:08:09 修改
阅读量494 收藏 11
点赞数 17
分类专栏： 探究openlayers 文章标签： 前端 javascript
于 2024-08-20 14:44:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41211797/article/details/141352764
版权

前言

        在高德地图中，如果使用过导航就可以看到它的轨迹线做的非常漂亮，用openlayer能实现吗？是可以的，只是稍微复杂了一点点。

1. 轨迹线构成分析

        我们来看看轨迹线是怎样组成的呢。

  1. 起点、终点可以用两个图标。然后使用openlayer的Image Style或者Overlay实现。

  2. 文字顺着线绘制，这个openlayer里已经有了，在样式类ol.style.Text里可以传入参数placement: 'line' 即可。

  3. 仔细观察，线是有边框的，openlayer的Style是无法直接实现的。这里我们可以取下巧，将其看为两个线组成，下面的线要宽一点，上面的线遮住下面的线，这里视觉上下面的线就成为了边框。
  4. 最后比较复杂的，线里面的箭头是顺着箭头的方向，并且是按照一定的间距分布的（在缩放地图不同分辨率下箭头间距也需要一致，这就需要动态去计算绘制）

2. 使用openlayer实现类高德轨迹线

        起点、终点、文字都可以使用openlayer自带的api实现，不复杂，这里就不讨论了。本次重点看下如何实现轨迹线的样式，以及在这个基础上实现箭头的动画效果。

2.1 如何实现一个高度定制的箭头

        如果我们要封装实现一个通用的轨迹绘制方法，需要考虑到箭头的问题（大小、箭头的宽度、箭头的角度、颜色可调），箭头不能使用普通的图片。在openlayer中样式类ol.style.Icon中有img属性可以传入HTMLCanvasElement，所以我们可以传入一个canvas对象，这样就简单了，我们可以根据传入的参数来定制这个箭头

        第二个问题是我们如何计算出箭头的样式的各个顶点。我们可以根据箭头的宽高，使用反三角函数来依次计算出各个顶点。 

/**
 * 获取航线右箭头
 * @param param
 * @returns {HTMLCanvasElement}
 */
function getRouteCanvasArrow(param) {
  let opt = Object.assign(
    {
      color: 'rgba(108,159,67,1)',
      lineWidth: 4,
      arrowHeight: 28,
      // 箭头夹角（度）
      angle: 110
    },
    param
  );

  if (opt.angle >= 180 || opt.angle <= 0) {
    throw new Error('箭头夹角取值范围为0-180');
  }

  const singleHeight = opt.arrowHeight / 2;
  // 计算出箭头宽度
  // 计算余切值
  const cotA = 1 / Math.tan((opt.angle * Math.PI) / 360);
  // 使用余切值计算相邻直角边, 箭头偏移宽度
  const offsetWidth = Math.ceil(cotA * singleHeight);
  const arrowWidth = offsetWidth + opt.lineWidth;

  const canvas = document.createElement('canvas');
  canvas.width = arrowWidth;
  canvas.height = opt.arrowHeight;
  let ctx = canvas.getContext('2d');
  ctx.fillStyle = opt.color;
  ctx.strokeStyle = opt.color;
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.lineTo(opt.lineWidth, 0);
  ctx.lineTo(arrowWidth, singleHeight);
  ctx.lineTo(opt.lineWidth, opt.arrowHeight);
  ctx.lineTo(0, opt.arrowHeight);
  ctx.lineTo(offsetWidth, singleHeight);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();
  return canvas;
}

2.2 实现轨迹线样式 

2.2.1  箭头间隔如何计算

        我们可以使用ol.geom.LineString的getCoordinateAt方法来获取线上的点（参数取值范围0-1，0是起点，1是终点）。同时我们可以获取当前地图分辨率resolution，通过线的geometry的长度除以分辨率resulotion（lineGeom.getLength() / resolution ），可以得到线的总长度像素。假如我们需要箭头间隔是50个像素，我们只需要用50除以线段的总长度就知道需要几个箭头了，然后用得到的百分比调用上面提到的ol.geom.LineString的getCoordinateAt方法获取箭头的位置。

2.2.2 如何实现箭头动画

        在openlayer里可以监听图层的postcompose事件，拿到地图的framestate和vectorContext（vectorContext可以使用来绘制feature，性能比较高），如果要执行动画，只需要把framestate的animate属性设置为true即可，这样地图自己会去判断，并且使用requestAnimationFrame去执行map.render绘制下一帧，达到连续绘制形成动画的效果。

        如何让箭头像前进一样动起来呢，只需要在每次postcompose事件里，我们自己绘制时改变一下箭头的位置，让其向前移动一点点（比如说1个像素），就可以了。

2.2.3 封装绘制高德轨迹样式的函数

        按照上面的思路，封装绘制函数，参数可以输入线的宽度，颜色，箭头样式，间隔，是否开启箭头动画等参数。除了必要参数，都可以使用默认参数，就可以绘制出来，使用起来比较方便。

import * as MapUtil from './MapUtil';
import _ from 'lodash';

// 用于判断feature是否存在
let routeUniqId = 0;
/**
 * 绘制类似高德、百度的轨迹样式
 * @param { String | ol.vector.Layer } param.lineLayer              【必填】图层名或图层对象
 * @param { WKTString | ol.geom.LineString } param.lineGeom         【必填】轨迹线
 * @param { String } param.theme                                    【选填】设置样式，可选值：gray（类似于走过的灰色）
 * @param { Array<Integer> } param.lineColor                        【选填】线颜色
 * @param { number } param.lineWidth                                【选填】线宽（px）
 * @param { Array<Integer> | boolean } param.borderColor            【选填】线边框颜色，为false时不绘制边框
 * @param { number } param.borderWidth                              【选填】线边框宽度（px）
 * @param { Array<Integer> | boolean } param.arrowColor             【选填】箭头颜色，为false时不绘制箭头
 * @param { number } param.arrowWidth                               【选填】箭头线宽度（px）
 * @param { number } param.arrowGap                                 【选填】箭头间距（px）
 * @param { boolean } param.arrowAnime                              【选填】是否开启箭头动画，默认否
 * @param { (feature: ol.Feature) => void } param.cb                【选填】回调函数
 */
function drawRouteLine(param) {
  let opt = Object.assign(
    {
      lineLayer: null,
      lineGeom: null,
      theme: false,
      lineColor: [0, 186, 107],
      lineWidth: 10,
      // 为false时不绘制边框
      borderColor: [4, 110, 74],
      borderWidth: 2,
      // 为false时不绘制箭头
      arrowColor: 'rgba(255, 255, 255, 1)',
      arrowWidth: 3,
      arrowGap: 100,
      // 箭头动画
      arrowAnime: false,
      cb: null
    },
    param
  );
  let lineLayer = _.isString(opt.lineLayer) ? MapUtil.getLayer(opt.lineLayer) : opt.lineLayer;
  let lineGeom = _.isString(opt.lineGeom) ? MapUtil.WKT.readGeometry(opt.lineGeom) : opt.lineGeom;

  // 1 预处理theme
  if (opt.theme === 'gray') {
    opt.lineColor = [154, 207, 197];
    opt.borderColor = [127, 174, 159];
  }

  // 2.1 线样式
  let bottomPathStyle;
  let upperPathStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: opt.lineColor,
      width: opt.lineWidth
    })
  });

  // 2.2 获取canvas箭头
  let arrowCanvas = MapUtil.getRouteCanvasArrow({
    color: opt.arrowColor,
    lineWidth: opt.arrowWidth,
    arrowHeight: opt.lineWidth
  });

  // 2.3 获取箭头样式
  const createArrowStyle = function (resolution, offset, vectorContext) {
    let resStyles = [];
    let lineLength = lineGeom.getLength() / resolution;
    if (lineLength < 50) {
      return resStyles;
    }
    let numArr = Math.ceil(lineLength / opt.arrowGap);
    let points = [];
    for (let i = 0; i <= numArr; i++) {
      let fracPos = i / numArr + offset;
      if (fracPos > 1) fracPos -= 1;
      let pg = new ol.Feature({
        geometry: new ol.geom.Point(lineGeom.getCoordinateAt(fracPos))
      });
      points.push(pg);
    }

    //确定方向并绘制
    lineGeom.forEachSegment((start, end) => {
      let line = new ol.geom.LineString([start, end]);
      _.forEach(points, point => {
        let coord = point.getGeometry().getFirstCoordinate();
        let cPoint = line.getClosestPoint(coord);
        if (Math.abs(cPoint[0] - coord[0]) < 1 && Math.abs(cPoint[1] - coord[1]) < 1) {
          let dx = end[0] - start[0];
          let dy = end[1] - start[1];
          let rotation = Math.atan2(dy, dx);
          let arrowStyle = new ol.style.Style({
            image: new ol.style.Icon({
              img: arrowCanvas,
              anchor: [1, 0.5],
              rotateWithView: true,
              rotation: -rotation,
              imgSize: [arrowCanvas.width, arrowCanvas.height]
            })
          });
          if (vectorContext) {
            vectorContext.drawFeature(point, arrowStyle);
          } else {
            arrowStyle.setGeometry(point.getGeometry());
            resStyles.push(arrowStyle);
          }
        }
      });
    });

    return resStyles;
  };

  // 3.绘制线
  if (opt.borderColor) {
    bottomPathStyle = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: opt.borderColor,
        width: opt.lineWidth + 2 * opt.borderWidth
      })
    });
    MapUtil.drawVectorFeature(lineLayer, {
      geom: lineGeom,
      style: bottomPathStyle
    });
  }

  let uid = routeUniqId++;
  let styles = upperPathStyle;
  if (!opt.arrowAnime && opt.arrowColor) {
    styles = function (feature, resolution) {
      let lineLength = lineGeom.getLength() / resolution;
      let offset = opt.arrowGap / lineLength / 2;
      let res = createArrowStyle(resolution, offset);
      res.push(upperPathStyle);
      return res;
    };
  }
  let lf = MapUtil.drawVectorFeature(lineLayer, {
    geom: lineGeom,
    style: styles,
    kv: { _uid_: uid }
  });

  // 4 执行回调
  try {
    opt.cb && opt.cb(lf);
  } catch (e) {
    console.error(e);
  }

  // 5.1 绘制箭头动画
  if (!opt.arrowAnime || !opt.arrowColor) {
    return;
  }

  // 5.2 绘制箭头动画函数
  let offset = 0.01;
  const drawArrow = function (evt) {
    let features = MapUtil.getFeatureByFilter(lineLayer, f => f.get('_uid_') == uid);
    if (!features.length) {
      lineLayer.un('postcompose', drawArrow);
      return;
    }

    let resolution = evt.frameState.viewState.resolution;
    createArrowStyle(resolution, offset, evt.vectorContext);

    let lineLength = lineGeom.getLength() / resolution;
    offset = offset + 1.5 / lineLength;
    //复位
    if (offset >= 1) offset = 0.001;
    // 告诉地图执行动画
    evt.frameState.animate = true;
  };

  lineLayer.on('postcompose', drawArrow);
}

2.3 最终效果

        使用封装的函数绘制出来的轨迹线，效果还是比较不错的。

        

微风斜阳，浊酒一壶
关注
  • 17
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OpenLayers实战，Openlayers实现绘制箭头，Openlayers绘制轨迹路径箭头，可调箭头角度和箭头长度
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-31 1522
在此之前，我们已经实现了基本图形（点、线、圆、多边形）的绘制（OpenLayers图形绘制，OpenLayers实现在地图上绘制线段、圆形和多边形），本章实现一个计算稍微麻烦一点的图形（箭头）来实现Openlayers绘制箭头，Openlayers绘制轨迹路径箭头，还支持箭头角度和箭头长度可调整。
092：vue+leaflet 绘制带箭头的轨迹线
大剑师兰特的GIS世界
02-23 715
第092个本示例的目的是介绍如何在vue+leaflet中绘制带箭头的轨迹线。
使用openlayers绘制类似高德的带方向箭头导航线（一）
yueliaang0921的博客
06-25 2070
使用openlayers绘制类似高德的带方向箭头导航线（一） 前言 很久之前写过一个使用openlayers实现绘制类似于高德带方向箭头的导航线的demo，这两天闲来无事，把思路跟代码贴出来分享给大家。 实现思路 首先根据给出的线的经纬度绘制线; 然后通过ol.map带的API getPixelFromCoordinate，获取线的顶点在屏幕的像素位置; 然后获取线上每隔一定间隔像素位置的像素，再通过ol.map带的API getCoordinateFromPixel，获取点的位置; 然后根据计算的
OpenLayers 6 绘制高德导航路径的蚂蚁线样式并实现箭头动画——VectorContext的重度使用
老胡的CSDN博客
11-03 9317
OpenLayers架构之内提供了矢量对象样式化的一些手段，但平时的使用总感觉有一些单一；而像高德、百度、腾讯地图这样的框架有着美观丰富的UI样式。从接触OpenLayers开始，就一直有一起学习的朋友讨论如何做一个像高德导航那样的路径样式，这个需求确实在很多项目中也会用到。本文就针对这个问题进行一下详细介绍。 原版高德导航的路径样式 OpenLayers实现的动态样式 问题分析 ...
使用openlayers绘制类似高德的带方向箭头导航线（二）
yueliaang0921的博客
06-25 817
使用openlayers绘制类似高德的带方向箭头导航线（二） 前言 上一篇博客中将绘制导航线的思路及实现与大家分享，然后留了个性能的问题，在这篇文章中解决;首先我们得知道性能问题的根源，是因为随着级别的放大，要计算线上的所有标记点的，这个数量是成几何倍数增加的，因此我们可以从只计算屏幕范围内的点这个思路触发解决。 前期准备 这次我们引入一个新的三方库，熟悉gis的朋友应该都使用过 turf.js ，turf.js是一个非常强大的处理空间数据的框架，有兴趣的朋友可以自己了解下，地址：http://tur
openlayers7实现导航轨迹效果
gery1990的专栏
01-09 1296
基于openlayers7实现类似高德导航的路径分析效果
OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-14 2001
通过使用OpenLayers的Draw模块实现在地图上绘制线段、圆形和多边形（三角形、矩形等多边形）。
vue3 + openlayers---仿高德导航-箭头线
QDxin_xyz的博客
06-02 638
【代码】vue3 + openlayers---仿高德导航-箭头线(无动画)
Openlayers绘制地图标注
10-14
在OpenLayers中绘制地图标注是将特定的信息或者兴趣点（POI）以图标或文字的形式在地图上清晰呈现的关键操作。这有助于用户更好地理解和解析地图上的数据。以下是对OpenLayers中绘制地图标注的详细说明： 1. **标注...
vue使用openlayers实现移动点动画
10-14
在Vue项目中，结合OpenLayers库实现移动点动画是一个常见的需求，这有助于为地图应用添加动态效果，例如模拟物体在地图上的移动轨迹。本示例主要讲解如何在Vue组件中设置和控制移动点动画。 首先，确保已经正确安装...
Vue+Openlayers自定义轨迹动画
10-14
在本文中，我们将深入探讨如何使用Vue.js框架与OpenLayers库来实现自定义的轨迹动画。Vue.js是一个轻量级的前端JavaScript框架，用于构建用户界面。而OpenLayers则是一个强大的开源JavaScript库，用于在Web上展示...
使用openlayers加载离线地图实例
10-06
通过以上步骤，你可以成功地使用OpenLayers加载离线地图，并通过mui将其打包成移动应用。这个实例不仅教你如何操作，还展示了如何将Web技术与移动开发相结合，以满足不同场景的需求。对于前端开发者来说，掌握这些...
vue openlayers 流动线效果
07-09
资源下载不可直接运行，下载前可查看博客：https://blog.csdn.net/KK_bluebule/article/details/125694548 资源可供参考，因为只是一个vue页面和json测试数据
前端字符串将其分割成长度为 32 的子字符串数组
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 189
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
pywebview 入门
小小宾的博客
08-18 651
pywebview 是一个轻量级的 python 库，旨在简化桌面应用程序的开发。它利用系统的 WebView 组件，使得开发人员可以使用现代 Web 技术（HTML、CSS、JavaScript）来创建用户界面，同时使用 python 处理业务逻辑。pywebview 使得创建跨平台桌面应用程序变得更加简单和高效。
CORS error && 302 Found
zcxbd的博客
08-19 92
单点登录认证：访问A系统，在B系统登录认证此处代码为A系统。
web前端之html弹窗面板的popover新属性
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
08-18 3666
web前端之html弹窗面板的popover新属性
SQL-约束篇
最新发布
Broken_x的博客
08-19 479
SQL约束是数据库设计中不可或缺的一部分，通过合理使用各种约束，可以确保数据的完整性和一致性。在实际应用中，开发者应根据需求灵活运用这些约束，以提高数据管理的效率和安全性。
openlayers加载移动端高德地图
05-17
要在移动端使用OpenLayers加载高德地图，可以使用OpenLayers自带的插件ol.source.XYZ和高德地图的URL模板。以下是一个简单的示例代码： ```javascript var gaodeLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}' }) }); var map = new ol.Map({ target: 'map', layers: [gaodeLayer], view: new ol.View({ center: ol.proj.fromLonLat([116.3975, 39.9085]), zoom: 12 }) }); ``` 在该示例中，我们创建了一个`ol.layer.Tile`图层，并使用`ol.source.XYZ`作为数据源，向高德地图的URL模板提供x、y、z参数来获取地图切片。然后，我们将该图层添加到地图中，并设置一个初始视图中心和缩放级别。 需要注意的是，高德地图的URL模板可能会发生变化，如果无法加载地图，请检查URL是否正确。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值