当前位置：首页 > news >正文

vue3+arcgisAPI4示例:轨迹点模拟移动(附源码下载)

news 2025/8/2 15:07:01

demo源码运行环境以及配置

运行环境：依赖Node安装环境，需要安装Node。运行工具：vscode或者其他工具。
配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：
（1）下载demo环境依赖包命令：npm install -g
（2）yarn install
（3）启动demo命令：yarn dev
（4）打包demo命令： yarn build:prod

示例效果
在这里插入图片描述
实现思路

使用模拟数据线图层geojson，获取线的点集合数据，然后点和点之间直线插值点，获取到插值点数据集，最后结合arcgis api
4实现达到轨迹点模拟圆滑移动效果。

核心部分代码

<template><div id="viewDiv"></div><div class="titleContainer center"><span>vue3+arcgisAPI4示例:轨迹点模拟移动效果</span></div><el-button type="primary" class="buttonRight btn1" @click="starBtn">开始模拟</el-button><el-button type="primary" class="buttonRight btn2" @click="clearBtn">清除模拟</el-button>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import "@arcgis/core/assets/esri/themes/light/main.css";
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import Basemap from "@arcgis/core/Basemap.js";
import esriConfig from "@arcgis/core/config";
import GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer.js";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import GroupLayer from "@arcgis/core/layers/GroupLayer.js";
import Graphic from "@arcgis/core/Graphic.js";
import Point from "@arcgis/core/geometry/Point.js";
import { distance } from "@arcgis/core/geometry/geometryEngine.js";
import { geographicToWebMercator } from "@arcgis/core/geometry/support/webMercatorUtils.js";
import { removeElementById } from '@/utils/index';
import axios from "axios";
let view, map, graphicsLayer = null;
let animationFrameId = null; // 动画帧ID
let features = []; // 存储轨迹点
onMounted(() => {initMap();
});
// 组件卸载时取消动画
onUnmounted(() => {if (animationFrameId) {cancelAnimationFrame(animationFrameId);animationFrameId = null;}
});
const initMap = () => {esriConfig.apiKey = 'AAPKca495ea263b64e44b61eaaecdbddebfcwEQjC8k8-6XGMrrXyCie6xzybboRl4REq-TwDQTm8Wz-8sL6REARz1wcm14Kq9ny';// 初始化创建地图对象const novaLayer = Basemap.fromId("arcgis-imagery-standard");map = new Map({// basemap: "satellite",basemap: novaLayer,});// 初始化创建视图view对象view = new MapView({container: "viewDiv",map: map,center: [111.69795926864639, 23.2026556059399],zoom: 15});// 去除logoview.ui.remove(["attribution", "zoom"]);// 监听视图view初始化加载完成执行view.when(function () {removeElementById('loader-wrapper');loadPointLineLayer();});
}
const loadPointLineLayer = async () => {// 使用axios请求获取GeoJSON数据const response = await axios.get("./src/views/carTrack/carTrackPoint.geojson");const geojsonData = response.data;features = geojsonData.features;// 创建GeoJSON图层，使用blob URL而不是文件URLconst blob = new Blob([JSON.stringify(geojsonData)], { type: "application/json" });const blobUrl = URL.createObjectURL(blob);let pointsLayer = new GeoJSONLayer({url: blobUrl})const response1 = await axios.get("./src/views/carTrack/carTrackLine.geojson");const geojsonData1 = response1.data;// 创建GeoJSON图层，使用blob URL而不是文件URLconst blob1 = new Blob([JSON.stringify(geojsonData1)], { type: "application/json" });const blobUrl1 = URL.createObjectURL(blob1);let lineLayer = new GeoJSONLayer({url: blobUrl1})const groupLayer = new GroupLayer({layers: [pointsLayer,lineLayer]});map.add(groupLayer);graphicsLayer = new GraphicsLayer({ id: 'graphicsLayer' });map.add(graphicsLayer);
}
const starBtn = () => {// 读取模拟车辆轨迹数据let points = [];// 取消可能存在的动画if (animationFrameId) {cancelAnimationFrame(animationFrameId);animationFrameId = null;}// 生成所有轨迹点for (let i = 0; i < features.length; i++) {const feature = features[i];if (i !== features.length - 1) {points = points.concat(getPointSAlongLine(feature, features[i + 1], 1))}else {points = points.concat(getPointSAlongLine(feature, feature, 1))}}// 使用requestAnimationFrame实现动画let currentIndex = 0;let lastTimestamp = 0;const frameInterval = 100; // 控制动画速度，相当于之前的100msconst animate = (timestamp) => {// 计算时间差if (!lastTimestamp) lastTimestamp = timestamp;const elapsed = timestamp - lastTimestamp;// 当经过的时间超过帧间隔时更新位置if (elapsed >= frameInterval) {lastTimestamp = timestamp;if (currentIndex < points.length) {refreshAlarmPoint(points[currentIndex]);currentIndex++;      // 继续动画animationFrameId = requestAnimationFrame(animate);} else {// 动画结束animationFrameId = null;}} else {// 如果时间间隔不够，继续等待animationFrameId = requestAnimationFrame(animate);}};// 启动动画animationFrameId = requestAnimationFrame(animate);
}
const clearBtn = () => {// 取消可能存在的动画if (animationFrameId) {cancelAnimationFrame(animationFrameId);animationFrameId = null;}if (graphicsLayer) {graphicsLayer.removeAll();}
}
// 刷新绘制实时报警点
const refreshAlarmPoint = (point) => {if (graphicsLayer) {graphicsLayer.removeAll();}// 创建节点圆圈符号const symbol = {type: "simple-marker",style: "circle",color: [255, 255, 255], // 白色填充size: 12,outline: {color: [66, 135, 245], // 蓝色边框width: 2}};const graphic = new Graphic({geometry: point,symbol: symbol});graphicsLayer.add(graphic);
}
/*** 计算起点和终点连线上距离起点指定距离的坐标点* @param {Array} startPoint - 起点坐标* @param {Array} endPoint - 终点坐标* @param {Number} dis- 距离起点的距离，单位：米* @returns {Array} - 计算得到的坐标点*/
……
</script>