openlayers7实现导航轨迹动态效果

openlayers7实现轨迹动画效果

本文基于上一篇文章做的优化改进
效果如下：

实现思路

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

实现代码

• 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 { getDestination, lineDistance, pathAngle } 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;
const DASH_OFFSET = 50 * window.devicePixelRatio;
const DURATION = 20;let offset = DASH_OFFSET;
const lineString = new LineString([fromLonLat([89.911906, 41.148991]),fromLonLat([107.490031, 40.316507]),fromLonLat([118.124797, 36.918396]),fromLonLat([112.367961, 24.090737])
]);
const routeFeature = new Feature({geometry: lineString
});
routeFeature.setStyle(new Style({stroke: new Stroke({color: [0, 0, 0, 0]})})
);
const source = new VectorSource({features: [routeFeature]
});
const layer = new VectorLayer({ source });function splitLinePoint(from, to, res, marginDistance

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！