地图优化

src/components/customCom/equipmentDialog.vue

@@ -34,7 +34,8 @@
 
 <script setup lang="ts">    
 import mapLine from "components/mapBaidu/mapLine.vue"
-import { apiBmaDevInfoList } from "http/api/echartApi"
+import { apiBmaDevInfoList ,apiBmCompanyInfoTimeListTime} from "http/api/echartApi"
+ 
 import moment  from "moment";
 const mapLineShow = ref(false)
 const mapLineRef = ref()
@@ -102,7 +103,8 @@ const searchByTimeFn=()=>{
         id:maId
         // id:1
     }
-    mapLineRef.value.initMapLine(params)
+    // mapLineRef.value.initMapLine(params)
+    initApiBmCompanyInfoTimeListTime(params)
 }
 const open = (maId:any) => {
     console.log("maIdmaId",maId)
@@ -116,10 +118,34 @@ const open = (maId:any) => {
         // id:1
     }
     setTimeout(()=>{
-        mapLineRef.value.initMapLine(params)
+        // mapLineRef.value.initMapLine(params)
+        initApiBmCompanyInfoTimeListTime(params)
     })
 }
+const initApiBmCompanyInfoTimeListTime = async (val: any) => {
 
+try {
+    const res: any = await apiBmCompanyInfoTimeListTime(val)
+    console.log("res-apiBmCompanyInfoTimeListTime",res)
+    // domShow.value = true
+    // console.log("apiBmCompanyInfoTimeListTime", res)
+ 
+    // res.forEach((ele: any) => {
+    //     linePointList.push(new BMapGL.Point(Number(ele.lon), Number(ele.lat)))
+    // })
+    mapLineRef.value.initMapLine(res,val.id)
+    // nextTick(() => {
+    //     initMap()
+    //     centerPoint = getcenterpoiont(res[0], res[res.length - 1])
+    //     console.log("centerPoint", centerPoint)
+    //     initCustomDot(centerPoint)
+    // })
+
+} catch (error) {
+
+}
+
+}
 defineExpose({
     open
 })

src/components/mapBaidu/mapLine.vue

@@ -5,20 +5,27 @@
 </template>
   
 <script setup lang="ts">
-import { getImg } from "@/utils/index"
+
-import { fa, tr } from "element-plus/es/locale";
+
-import { apiBmCompanyInfoTimeListTime } from "http/api/echartApi"
-import { parseArgs } from "util";
 let map: any = null
 let centerPoint: any = null
 let domId = ref("0")
 let domShow = ref(false)
 let animiationLineList = []
+let props = defineProps({
+    lineStyle: {
+        type: Object,
+        default: {
+            strokeColor: "#0e83ed",
+            strokeWeight: 4
+        }
+    }
+})
 onMounted(() => {
     console.log("map", "map")
 })
 
-const linePointList: any = []
+let linePointList: any = []
 
 const initMap = () => {
     map = new BMapGL.Map("equipmentIdMap" + domId.value);
@@ -84,21 +91,14 @@ const initCustomDot = (centerPoint: any) => {
 }
 
 
-const initPolyline = () => {
-    var polyline = new BMapGL.Polyline(linePointList, { strokeColor: '#0788e6', strokeWeight: 4, strokeOpacity: 1. });
-    map.addOverlay(polyline);
-}
 
 const initPolylineAnimation = () => {
-    var pl = new BMapGL.Polyline(linePointList, {
+    var pl = new BMapGL.Polyline(linePointList, props.lineStyle);
-        strokeColor: "#0e83ed",
-        strokeWeight: 4
-    });
     // setTimeout('start()', 3000);
     const trackAni = new BMapGLLib.TrackAnimation(map, pl, {
         overallView: true,
         tilt: 30,
-        duration: 200,
+        duration: 2000,
         delay: 300,
     });
     start()
@@ -145,33 +145,23 @@ const getcenterpoiont = (pointStart: any, pointEnd: any) => {
     return pointcenter;
 
 }
-const initMapLine = (params: any) => {
+const initMapLine = (res: any, id: any) => {
-    domId.value = params.id
+    domId.value = id
     domShow.value = false
-    initApiBmCompanyInfoTimeListTime(params)
+      res.forEach((ele: any) => {
-}
+        linePointList.push(new BMapGL.Point(Number(ele.lon), Number(ele.lat)))
-
+    })
-const initApiBmCompanyInfoTimeListTime = async (val: any) => {
+    nextTick(() => {
-
-    try {
-        const res: any = await apiBmCompanyInfoTimeListTime(val)
         domShow.value = true
-        console.log("apiBmCompanyInfoTimeListTime", res)
+        setTimeout(() => {
-        res.forEach((ele: any) => {
-            linePointList.push(new BMapGL.Point(Number(ele.lon), Number(ele.lat)))
-        })
-        nextTick(() => {
             initMap()
             centerPoint = getcenterpoiont(res[0], res[res.length - 1])
             console.log("centerPoint", centerPoint)
             initCustomDot(centerPoint)
         })
-
+    })
-    } catch (error) {
-
-    }
-
 }
+
 defineExpose({
     initMapLine
 })