openlayers7实现导航轨迹效果

openlayers7实现类似高德路径轨迹效果

基于ol7实现线的轨迹渲染效果，附代码实现
效果如下：

• 高德效果
  

• 本文实现效果
  

实现思路

1. 创建矢量图层
2. 设置矢量图层默认样式，设置默认样式不可见
3. 动态更新矢量图层的线样式
4. 基于canvas实现的线段轨迹效果

实现代码

• main.js

import Feature from "ol/Feature.js";
import { fromLonLat } from "ol/proj";
import Map from "ol/Map.js";
import VectorSource from "ol/source/Vector.js";
import View from "ol/View.js";
import XYZ from "ol/source/XYZ.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { getVectorContext } from "ol/render.js";
import LineString from "ol/geom/LineString.js";
import MultiLineString from "ol/geom/MultiLineString";
import { transform2D } from "ol/geom/flat/transform";
import { getLineOffsetDashPixelCoords, getDestination } from "./utils";
import { Style } from "ol/style";
import Stroke from "ol/style/Stroke.js";const DEFAULT_LINE_WIDTH = 10 * window.devicePixelRatio; /* 轨迹线段默认宽度 */
const DEFAULT_LINE_OUT_WIDTH = DEFAULT_LINE_WIDTH * 1.2;function rendererArrows(event) {const vectorContext = getVectorContext(event);const layer = event.target;const transform = vectorContext["transform_"];const ctx = vectorContext["context_"];const source = layer.getSource();const viewExtent = event.frameState.extent;source.forEachFeatureInExtent(viewExtent, (feature) => {const geometry = feature.getGeometry();let lineStrings;if (geometry instanceof MultiLineString)lineStrings = geometry.getLineStrings();else if (geometry instanceof LineString) lineStrings = [geometry];if (!lineStrings) return;lineStrings.forEach((lineString, index) => {const coords = lineString.getFlatCoordinates();const pixelCoordinates = transform2D(coords,0