网站建设方案预算网站制作技巧
代码实现了一个基于定时器的轨迹动画效果。
通过预定义的轨迹数据点，每2秒更新一次图标位置，并绘制红色半透明线段连接相邻点。首先在地图上创建图层并添加初始图标，然后使用定时器逐步更新图标坐标，计算航向角调整图标方向（与正北的夹角），同时在移动路径上生成线段特征对象。当遍历完所有轨迹点后自动清除定时器。该功能适用于可视化动态移动轨迹场景。
let trajectData = [[110, 30],[110.2, 30],[110.4, 30.2],[110.8, 30.4],[111, 31],[111.3, 31],[111.6, 31],[111.9, 31],[112, 31],[112.3, 31],[112.5, 31],[112.8, 31],[113, 31],[114, 31],[115.3, 32],[115.5, 32],[115.8, 31.8],[116, 31.4],[116.2, 31.1],[116.5, 30.5],[115, 30.2],[114, 29.8],[113, 29.6],[112, 29.4],[111, 30.2],[110, 30.4],[109, 30.6],[108, 31],
];
export function addTrajectory(id) {const layers = map.getLayers().getArray();let layer = layers.find((item) => item.values_.id === id);if (layer) {layer.getSource().clear();} else {layer = new LayerVector({source: new SourceVector({features: "",}),properties: {id: id,},});map.addLayer(layer);}let imgUrl = require("../assets/111.png");let iconFeature = new Feature({geometry: new Point([110, 30]),});let icon = new Icon({anchor: [120, 1],scale: 0.2,anchorXUnits: "pixels",anchorYUnits: "pixels",src: imgUrl,});iconFeature.setStyle(new Style({image: icon,}));// 添加到之前的创建的layer中去layer.getSource().addFeature(iconFeature);let i = 0;intervals = setInterval(() => {if (trajectData[i + 1]) {// 更改点的位置iconFeature.setGeometry(new Point(trajectData[i + 1]));let arc = 0;if ((trajectData[i + 1][0] - trajectData[i][0] >= 0 &&trajectData[i + 1][1] - trajectData[i][1] >= 0) ||(trajectData[i + 1][0] - trajectData[i][0] < 0 &&trajectData[i + 1][1] - trajectData[i][1] > 0)) {arc = Math.atan((trajectData[i + 1][0] - trajectData[i][0]) /(trajectData[i + 1][1] - trajectData[i][1]));} else if ((trajectData[i + 1][0] - trajectData[i][0] > 0 &&trajectData[i + 1][1] - trajectData[i][1] < 0) ||(trajectData[i + 1][0] - trajectData[i][0] < 0 &&trajectData[i + 1][1] - trajectData[i][1] < 0)) {arc =Math.PI +Math.atan((trajectData[i + 1][0] - trajectData[i][0]) /(trajectData[i + 1][1] - trajectData[i][1]));}icon.setRotation(arc); //设置航向角（与正北的夹角）// 创建矢量对象let feature = new Feature({geometry: new LineString([trajectData[i], trajectData[i + 1]]),});feature.setStyle(new Style({stroke: new Stroke({color: [255, 0, 0, 0.5],width: 4,}),}));layer.getSource().addFeature(feature);i++;} else {clearInterval(intervals);intervals = null;}}, 2000);
}实时轨迹