From 4a2f8d683627299a30811c4977b399aa8690c1ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=B0=8F=E4=B8=9C?=
 <13396135+anton-aoi@user.noreply.gitee.com>
Date: Sat, 25 Nov 2023 12:50:27 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=A8=E8=BF=B9=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                 |   1 +
 src/router/index.js          |  13 ++-
 src/views/system/map/map.vue | 195 +++++++++++++++++++++++++++++++++++
 3 files changed, 208 insertions(+), 1 deletion(-)
 create mode 100644 src/views/system/map/map.vue

diff --git a/package.json b/package.json
index 6a46cc5..2ed93d6 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "url": "https://gitee.com/y_project/MuYu-Cloud.git"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
diff --git a/src/router/index.js b/src/router/index.js
index 2afac71..c352b40 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -160,7 +160,18 @@ export const dynamicRoutes = [
         meta: {title: '修改生成配置', activeMenu: '/tool/gen'}
       }
     ]
-  }
+  },
+  {
+    path: '/system/map',
+    children: [
+      {
+        path: 'index',
+        name: '实时轨迹',
+        component: () => import('@/views/system/map/map.vue'),
+        meta: { title: '实时轨迹', icon: 'form' }
+      }
+    ]
+  },
 ]
 
 // 防止连续点击多次路由报错
diff --git a/src/views/system/map/map.vue b/src/views/system/map/map.vue
new file mode 100644
index 0000000..05eea1a
--- /dev/null
+++ b/src/views/system/map/map.vue
@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <el-row>
+      <div id="container"></div>
+      <div class="input-card" v-show="true">
+        <div class="input-item">
+          <el-button type="primary" size="small" style="width: 90px" @click="startAnimation">开始动画</el-button>
+          <el-button type="primary" size="small" style="width: 90px" @click="pauseAnimation">暂停动画</el-button>
+          <el-button type="primary" size="small" style="width: 90px" @click="resumeAnimation">继续动画</el-button>
+          <el-button type="primary" size="small" style="width: 90px" @click="stopAnimation">停止动画</el-button>
+        </div>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+
+<script>
+//这里可以导入其他文件（比如： 组件， 工具 js， 第三方插件 js， json文件， 图片文件等等）
+//例如： import 《组件名称》 from '《组件路径》 ';
+//安全密钥：6911d4b3d9f7745cfed4ab0c87ad9b3f
+//Key:965af9776cc04fc39f19b9ced7423ca0
+import AMapLoader from "@amap/amap-jsapi-loader";
+// 设置安全密钥
+window._AMapSecurityConfig = {
+  securityJsCode: '6911d4b3d9f7745cfed4ab0c87ad9b3f',
+}
+export default {
+  name: 'TrackContainer',
+  //import 引入的组件需要注入到对象中才能使用
+  components: {},
+  props: {
+    visible: Boolean,
+  },
+  data() {
+    //这里存放数据
+    return {
+      AMap: null,
+      //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
+      map: null,
+      mouseTool: null,
+      marker: null,
+      lineArr: [],
+    };
+  },
+  //计算属性 类似于 data 概念
+  computed: {},
+  //监控 data 中的数据变化
+  watch: {
+  },
+  //方法集合
+  methods: {
+    pauseAnimation () {
+      this.marker.pauseMove();
+    },
+    resumeAnimation () {
+      this.marker.resumeMove();
+    },
+    stopAnimation () {
+      this.marker.stopMove();
+    },
+    startAnimation () {
+      this.marker.moveAlong(this.lineArr, {
+        // 每一段的时长
+        duration: 500,//可根据实际采集时间间隔设置
+        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+        autoRotation: true,
+      });
+    },
+    initMap() {
+      AMapLoader.load({
+        key: "965af9776cc04fc39f19b9ced7423ca0",             // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        "plugins": [
+          "AMap.Scale",
+          "AMap.HawkEye",
+          "AMap.ToolBar",
+          "AMap.AutoComplete",
+          "AMap.PlaceSearch",
+          "AMap.ControlBar",
+          "AMap.MouseTool",
+          "AMap.DragRoute",
+          "AMap.MoveAnimation"],         // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      }).then((AMap) => {
+        this.AMap=AMap
+        this.marker=null;
+        this.lineArr = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];
+        this.map = new AMap.Map("container", {  //设置地图容器id
+          viewMode: "2D",  //  是否为3D地图模式
+          zoom: 13,   // 初始化地图级别
+          center: [116.478935,39.997761], //中心点坐标  成都 104.065735, 30.659462
+          resizeEnable: true
+        });
+
+        this.marker = new AMap.Marker({
+          map: this.map,
+          position: [116.478935,39.997761],
+          icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
+          offset: new AMap.Pixel(-13, -26),
+        });
+
+        // 绘制轨迹
+        var polyline = new AMap.Polyline({
+          map: this.map,
+          path: this.lineArr,
+          showDir:true,
+          strokeColor: "#28F",  //线颜色
+          // strokeOpacity: 1,     //线透明度
+          strokeWeight: 6,      //线宽
+          // strokeStyle: "solid"  //线样式
+        });
+
+        var passedPolyline = new AMap.Polyline({
+          map: this.map,
+          strokeColor: "#AF5",  //线颜色
+          strokeWeight: 6,      //线宽
+        });
+
+        this.marker.on('moving', function (e) {
+          passedPolyline.setPath(e.passedPath);
+          this.map.setCenter(e.target.getPosition(),true)
+        }.bind(this));
+
+        this.map.setFitView();
+
+
+
+
+      }).catch(e => {
+        console.log(e);
+      })
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前 this 实例）
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问 DOM 元素）
+  mounted() {
+    this.initMap();
+  },
+  //生命周期 - 创建之前
+  beforeCreate() {
+  },
+  //生命周期 - 挂载之前
+  beforeMount() {
+  },
+  //生命周期 - 更新之前
+  beforeUpdate() {
+  },
+  //生命周期 - 更新之后
+  updated() {
+  },
+  //生命周期 - 销毁之前
+  beforeDestroy() {
+  },
+  //生命周期 - 销毁完成
+  destroyed() {
+  },
+  //如果页面有 keep-alive 缓存功能， 这个函数会触发
+  activated() {
+  },
+}
+</script>
+
+<style scoped>
+#container {
+  padding: 0px;
+  margin: 0px;
+  width: 100%;
+  height: 800px;
+}
+.input-item {
+  height: 2.2rem;
+}
+
+.input-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border-radius: .25rem;
+  width: 10rem;
+  border-width: 0;
+  border-radius: 0.4rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+  position: fixed;
+  bottom: 12rem;
+  right: 2rem;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 0.75rem 1.25rem;
+}
+</style>