feat: /dataVisualization/visualization 行程数据

god-ui/public/index.html

@@ -213,6 +213,6 @@
         </div>
 	</div>
   </body>
-  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e8722adaace412f3d9d531a5cb019756&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.BezierCurveEditor,AMap.RectangleEditor,AMap.CircleEditor,AMap.PolygonEditor,AMap.PolylineEditor"></script>
+  <!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e8722adaace412f3d9d531a5cb019756&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.BezierCurveEditor,AMap.RectangleEditor,AMap.CircleEditor,AMap.PolygonEditor,AMap.PolylineEditor"></script> -->
 
 </html>

god-ui/src/views/dataVisualization/visualization/index.vue

@@ -67,10 +67,10 @@
       <div class="trip-warper">
         <div class="trip-top">
           <div>车牌号</div>
-          <div>
+          <div style="padding: 0 6px;">
-            <input type="text" />
+            <el-input placeholder="请输入车牌号"></el-input>
           </div>
-          <div>查询</div>
+          <el-button size="small" type="primary">查询</el-button>
         </div>
         <div id="map"></div>
       </div>
@@ -184,6 +184,7 @@ export default {
           value: "3",
         },
       ],
+      map: null,
     };
   },
   mounted() {
@@ -443,40 +444,6 @@ export default {
           console.log(e);
         });
     },
-    // 添加图形点标记
-    // addMapMarker(sourceData = [], type = "sxt", info = {}) {
-    //   const marker = new AMap.Marker({
-    //     position: new AMap.LngLat(sourceData[0], sourceData[1]),
-    //     offset: new AMap.Pixel(-30, -52),
-    //     icon: `/images/${type}.png`, // 添加 Icon 图标 URL
-    //     title: "",
-    //   });
-    //   this.map.add(marker);
-    //   marker.on("click", (e) => {
-    //     this.showInfoWindow(sourceData[0], sourceData[1], {
-    //       type: "#304156",
-    //       ...info,
-    //     });
-    //   });
-    // },
-    // // 显示信息窗体
-    // showInfoWindow(lng, lat, sourceInfo) {
-    //   let content = `
-    //   <div style="padding: 6px;background-color: #32b9ef;">
-    //                  <div>
-    //                    <div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
-    //                      <div style="padding: 4px;margin:5px 0">${sourceInfo.name}</div>
-    //                      <div style="padding: 4px;">正常运行</div>
-    //                  </div>
-    //              </div>
-    //         `;
-    //   const infoWindow = new AMap.InfoWindow({
-    //     content,
-    //     anchor: "middle-left",
-    //     isCustom: true,
-    //   });
-    //   infoWindow.open(this.map, [lng, lat]);
-    // },
   },
 };
 </script>
@@ -578,15 +545,17 @@ export default {
   padding: 15px;
   .trip-warper {
     width: 100%;
-    height: calc(450px - 2rem);
+    height: 600px;
     position: relative;
     .trip-top {
       position: absolute;
-      top: 0;
+      top: 10px;
-      left: 0;
+      left: 10px;
+      padding: 10px 14px;
+      background-color: #fff;
+      border-radius: 6px;
       z-index: 999;
       display: flex;
-      width: 26%;
       align-items: center;
       justify-content: space-between;
       height: 40px;

god-ui/src/views/loader/data/track/index.vue

@@ -21,8 +21,11 @@
   </div>
 </template>
 <script>
-
 import {formatDate} from '@/utils/index'
+import AMapLoader from "@amap/amap-jsapi-loader";
+window._AMapSecurityConfig = {
+  securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
+};
 
 export default {
   data() {
@@ -98,6 +101,7 @@ export default {
         equSelect: null,
         lists: []
       },
+      AMap: null,
     }
   },
   mounted() {
@@ -106,26 +110,32 @@ export default {
   },
   methods: {
     initMiddleMap() {
-      this.map = new AMap.Map("MiddleMap", {
+      AMapLoader.load({
-        zoom: 13,//级别
+        key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
-        center: [87.52746963724496, 43.84122412572595], //中心点坐标
+        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-      });
+      }).then((AMap) => {
-      this.map.on('mapmove', () => {
+        this.AMap = AMap
-      })
+        this.map = new AMap.Map("MiddleMap", {
-      this.map.on('click', (e) => {
+          zoom: 13,//级别
-        console.log('e', e);
+          center: [87.52746963724496, 43.84122412572595], //中心点坐标
-        navigator.clipboard.writeText(`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`)
+        });
-      })
+        this.map.on('mapmove', () => {
-      const marks = this.marks;
+        })
-      marks.forEach(item => {
+        this.map.on('click', (e) => {
-        this.addMapMarker(item.location, 'car2', item)
+          console.log('e', e);
+          navigator.clipboard.writeText(`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`)
+        })
+        const marks = this.marks;
+        marks.forEach(item => {
+          this.addMapMarker(item.location, 'car2', item)
+        })
       })
     },
     // 添加图形点标记
     addMapMarker(LngLatData = [], type = '', info = {}) {
-      const marker = new AMap.Marker({
+      const marker = new this.AMap.Marker({
-        position: new AMap.LngLat(LngLatData[0], LngLatData[1]),
+        position: new this.AMap.LngLat(LngLatData[0], LngLatData[1]),
-        offset: new AMap.Pixel(-30, -52),
+        offset: new this.AMap.Pixel(-30, -52),
         icon: `/images/${type}.png`, // 添加 Icon 图标 URL
         title: ''
       });
@@ -149,7 +159,7 @@ export default {
             </div>`;
       this.map.setZoom(15);
       this.map.setCenter([lng, lat]);
-      const polyline = new AMap.Polyline({
+      const polyline = new this.AMap.Polyline({
         map: this.map,
         path: sourceInfo.gpsData,
         showDir: true,
@@ -158,7 +168,7 @@ export default {
         strokeWeight: 6,      //线宽
         // strokeStyle: "solid"  //线样式
       });
-      const infoWindow = new AMap.InfoWindow({
+      const infoWindow = new this.AMap.InfoWindow({
         content,
         anchor: 'middle-left',
         isCustom: true