web端：轨迹

ebike-operate/src/views/Urban/OperateRegionMap/index.vue

@@ -156,268 +156,7 @@ const clearDraw=()=>{
   mapref.value.clearDraw();
 }
 
-
+defineExpose({showModal});
-/* const props = defineProps({
-  onCallBack: {
-    type: Function,
-    required: true
-  },
-  openTitle: {
-    type: String,
-    default: '' // Default value in case no openTitle is provided
-  }
-});
-
-
-const showModal = (data) => {
-  if (data) {
-    loadMap(data);
-  }
-  open.value = true;
-};
-const handleClose = () => {
-  open.value = false;
-  ClearEditor();
-  if (props.onCallBack) {
-    props.onCallBack(formData.value);
-  }
-};
-defineExpose({ showModal });
-
-const formData = ref({
-  "regionId": "",
-  "regionName": "",
-  "simpleName": "",
-  "zoneId": "",
-  "points": [],
-  "shapeType": 2, // 1:圆形 2:多边形
-  "radius": 0, // 圆形半径
-});
-
-let timer = null;
-const loadMap = (dataRegion) => {
-  if (editorRef.value) {
-    clearTimeout(timer);
-    if (dataRegion) {
-      const { operationRegionId } = dataRegion;
-      callOperate("/ebikeRegion/getOperationById?regionId=" + operationRegionId, {}, "get").then((res) => {
-        console.log("5555555555555555555555555555",res);
-        if (res.code != 200) {
-          message.error(res.message)
-          return
-        }
-        const { operationRegionName, simpleName, zoneId, points, shapeType, radius } = res.data;
-        formData.value = {
-          "operationRegionId": operationRegionId,
-          "operationRegionName": operationRegionName,
-          "simpleName": simpleName,
-          "zoneId": zoneId,
-          "points": points,
-          "shapeType": shapeType, // 1:圆形 2:多边形
-          "radius": radius, // 圆形半径	
-        }
-        loadGeometry();
-      });
-    }
-  }
-  else {
-    timer = setTimeout(() => {
-      loadMap(dataRegion);
-    }, 1000)
-  }
-};
-
-let shapeId = null;
-const loadGeometry = () => {
-  const { points, shapeType, regionId, radius } = formData.value;
-  shapeId = 'polygon' + regionId;
-  if (shapeType == 1) {
-    shapeId = 'circle' + regionId;
-  }
-  if (points) {
-    if (shapeType == 1) {
-      const circleGeometries = [];//editorRef.value.circle.getGeometries();
-      if (circleGeometries.length > 0) {
-        circleGeometries.forEach((geometry) => {
-          editorRef.value.circle.remove(geometry); // 删除之前的图形数据
-        });
-      }
-      circleGeometries.push({
-        id: shapeId, // 圆形图形数据的标志信息
-        styleId: 'circle', // 样式id
-        radius: radius, // 圆形的半径
-        center: new TMap.LatLng(points[0].latitude, points[0].longitude),
-        properties: {
-          // 圆形的属性数据
-          title: 'circle',
-        },
-      });
-      editorRef.value.circle.setGeometries(circleGeometries);
-      //设置视野范围
-      const mycircle = editorRef.value.circle.getGeometryById(shapeId);
-      const boundary = TMap.geometry.computeBoundingRectangle(mycircle.paths);
-      mapRef.value.map.fitBounds(boundary, {
-        padding: 100, // 设置地图边界的内边距
-      });
-    }
-    else if (shapeType == 2) {
-      const paths = [];
-      points.forEach((point) => {
-        paths.push(new TMap.LatLng(point.latitude, point.longitude));
-      });
-      const polygonGeometries = [];//editorRef.value.polygon.getGeometries();
-      polygonGeometries.push({
-        id: shapeId, // 多边形图形数据的标志信息
-        styleId: 'polygon', // 样式id
-        paths, // 多边形的位置信息
-        properties: {
-          // 多边形的属性数据
-          title: 'polygon',
-        },
-      });
-      editorRef.value.polygon.setGeometries(polygonGeometries);
-      // var position = TMap.geometry.computeCentroid(paths);
-      // mapRef.value.map.setCenter(position);
-      //设置视野范围
-      const mypolygon = editorRef.value.polygon.getGeometryById(shapeId);
-      const boundary = TMap.geometry.computeBoundingRectangle(mypolygon.paths);
-      mapRef.value.map.fitBounds(boundary, {
-        padding: 100, // 设置地图边界的内边距
-      });
-    }
-    buttonName.value = '重置';
-    editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
-    editorRef.value.editor.select([shapeId]);
-  }
-}
-
-const mapRef = ref(null);
-const center = ref(config.map.center);
-const control = ref({ scale: {}, zoom: { position: 'topRight', }, });
-const options = ref({ renderOptions: { renderOptions: true, } });
-const editorRef = ref(null);
-const onMapInited = () => {
-  if (mapRef.value) {
-    const windowWidth = window.innerWidth;
-    const windowHeight = window.innerHeight;
-    const calculatedWidth = windowWidth - 60;
-    const calculatedHeight = windowHeight - 100;
-    // 调用地图实例的 resize 方法
-    const map = mapRef.value.map;
-    if (map) {
-      map.resize(calculatedWidth, calculatedHeight);
-    }
-  }
-};
-
-const buttonName = ref('清除');
-const onDrowComplet = (geomeytry) => {
-  //console.log("onDrowComplet",geomeytry);
-  if (geomeytry.id) {
-    editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
-    editorRef.value.editor.select([geomeytry.id]);
-    editorRef.value.editor.snappable = true
-  }
-};
-const onDrawError = (e) => {
-  ClearEditor();
-  editorRef.value.editor.stop();
-};
-
-const onAdjustComplete = (geomeytry) => {
-  //console.log("onAdjustComplete",geomeytry);
-};
-const onAdjustError = (e) => {
-  ClearEditor();
-  loadGeometry();
-};
-
-const onEditorClear = () => {
-  if (!isNullOrEmpty(shapeId)) {
-    loadGeometry();
-  }
-  else {
-    ClearEditor();
-  }
-}
-
-const ClearEditor = () => {
-  editorRef.value.editor.select([]);
-  editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
-  editorRef.value.circle.setGeometries([]);
-  editorRef.value.polygon.setGeometries([]);
-}
-
-const onEditorComplete = () => {
-  if (editorRef.value.editor.getSelectedList().length > 0) {
-    const selectedList = editorRef.value.editor.getSelectedList();
-    const geometry = selectedList[0];
-    console.log("onEditorComplete", geometry);
-    if (geometry.id) {
-      if (geometry.radius && geometry.center) {
-        formData.value.radius = geometry.radius;
-        formData.value.points = [
-          {
-            "latitude": geometry.center.lat,
-            "longitude": geometry.center.lng,
-          }
-        ];
-        formData.value.shapeType = 1;
-      }
-      else if (geometry.paths) {
-        formData.value.radius = 0;
-        formData.value.points = geometry.paths.map((point) => {
-          return {
-            "latitude": point.lat,
-            "longitude": point.lng,
-          };
-        });
-        formData.value.points.push({
-          "latitude": geometry.paths[0].lat,
-          "longitude": geometry.paths[0].lng,
-        });
-        formData.value.shapeType = 2;
-      }
-      if (!isNullOrEmpty(formData.value.operationRegionId)) {
-        callOperate("/ebikeRegion/updateOperation", formData.value, "post").then((res) => {
-          if (res.code == 200) {
-            message.success(res.message, 3, handleClose);
-          } else {
-            message.error(res.message, 10);
-          }
-        });
-      }
-      else {
-        handleClose();
-      }
-    }
-  }
-  else {
-    message.error("请先绘制区域！")
-  }
-}
-
-const onDeleteComplete = (geomeytry) => {
-  if (editorRef.value.polygon.getGeometries().length > 0) {
-    const shapeId = editorRef.value.polygon.getGeometries()[0].id;
-    editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
-    editorRef.value.editor.select([shapeId]);
-  }
-  else if (editorRef.value.circle.getGeometries().length > 0) {
-    const shapeId = editorRef.value.circle.getGeometries()[0].id;
-    editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
-    editorRef.value.editor.select([shapeId]);
-  }
-  else {
-    editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
-    // editorRef.value.circle.setGeometries([]);
-    // editorRef.value.polygon.setGeometries([]);
-  }
-}; */
-
-
-
-defineExpose({showModal})
 
 </script>
 

ebike-operate/src/views/common/amap.vue

@@ -8,9 +8,8 @@
 <script setup>
     import { onMounted,ref,watch } from 'vue';
     import AMapLoader from '@amap/amap-jsapi-loader';
-    import {isEqualWith,cloneDeep} from "lodash";
     
-    const props=defineProps(["drawType","points"]);
+    const props=defineProps(["drawType","points","showTrack"]);
     const emit=defineEmits(["ondraw"])
 
     let oAMap=null;
@@ -36,6 +35,10 @@
       if(!isload) return;
       const b=checkPoints(nval,oval);
       if(!b) return;
+      if(showTrack){
+        showTrack(nval);
+        return;
+      }
       switch(props.drawType){
         case "edit":
           editPolygons(nval);
@@ -45,6 +48,7 @@
      
     })
 
+
     const checkPoints=(nval,oval)=>{
         if(nval.length!=oval.length) return true;
         let b=false;
@@ -59,8 +63,6 @@
         return b;
     }
     
-
-    
     onMounted(() => {
       
       window._AMapSecurityConfig = {
@@ -70,7 +72,7 @@
     AMapLoader.load({
       key: "0e6910fae6848722b0e57f0c01597499", // 申请好的Web端开发者Key，首次调用 load 时必填
       version: "2.0", 
-      plugins: ["AMap.Geolocation","AMap.MouseTool","AMap.Polygon","AMap.PolygonEditor"], 
+      plugins: ["AMap.Marker","AMap.Pixel","AMap.Polyline","AMap.Geolocation","AMap.MouseTool","AMap.Polygon","AMap.PolygonEditor"], 
     })
     .then((AMap) => {
       isload=true;
@@ -80,21 +82,11 @@
         zoom: 18, // 初始化地图级别
       });
 
-      // // 初始化定位控件
+      if(props.showTrack) {
-      // const geolocation = new oAMap.Geolocation({
+        showTrack(props.points);
-      //   enableHighAccuracy: true, // 是否使用高精度定位
+      }
-      //   timeout: 10000, // 超时时间（毫秒）
-      //   showButton: true, // 显示定位按钮
-      //   buttonPosition: 'LT', // 按钮位置
-      //   //buttonOffset: new AMap.Pixel(50, -60), // 按钮偏移量
-      //   buttonSize:"16px"
-      // });
- 
-      // // 将定位控件添加到地图
-      // map.addControl(geolocation);
       switch(props.drawType){
         case "add":
-          
            addPolygons();
           break;
         case "edit":
@@ -109,6 +101,44 @@
 
 });
 
+  const showTrack=(points)=>{
+    if(points.length==0) return;
+    const data=points.map(item=>{
+        return [item.longitude,item.latitude]
+    })
+    const start=new oAMap.Marker({
+      map:map,
+      icon:"/src/assets/startPoint.png",
+      position:[data[0][0],data[0][1]],
+      offset: new oAMap.Pixel(-18, -36)
+    });
+     const end=new oAMap.Marker({
+      map:map,
+      icon:"/src/assets/endPoint.png",
+      position:[data[data.length-1][0],data[data.length-1][1]],
+      offset: new oAMap.Pixel(-18, -36)
+    });
+
+    const  polyline = new AMap.Polyline({
+      path: data,
+      isOutline: true,
+      outlineColor: '#004EE1',
+      borderWeight: 3,
+      strokeColor: "#2C68FF",
+      strokeOpacity: 1,
+      strokeWeight: 2,
+      // 折线样式还支持 'dashed'
+      strokeStyle: "solid",
+      // strokeStyle是dashed时有效
+      strokeDasharray: [10, 5],
+      lineJoin: 'round',
+      lineCap: 'round',
+      zIndex: 50,
+    })
+    map.add([polyline]);
+    map.setFitView();
+  }
+
   const editPolygons=(points)=>{
    map.clearMap();
    if(polyEditor) polyEditor.close();

ebike-operate/src/views/form/cyclingorderrefund/orderinfo/CyclingTrajectory.vue

@@ -1,4 +1,43 @@
 <template>
+  <div style="width: 100%;height: 500px;">
+      <amap :showTrack="showTrack" :points="points"/>
+  </div>
+</template>
+<script setup>
+  import { ref,onMounted } from "vue";
+  import { callOperate } from '@/apis/call.js';
+  import { message } from 'ant-design-vue';
+  import amap from "../../../common/amap.vue";
+
+  const props=defineProps(["orderParams"]);
+  const showTrack=ref(false);
+  const points=ref([]);
+  
+  onMounted(()=>{
+     const params = {
+        ebikeCode: props.orderParams.ebikeCode,
+        startTime: props.orderParams.startTime,
+        endTime: props.orderParams.endTime,
+        interval: "30s"
+      }
+      callOperate("/ebikeTracking/query", params).then((res) => {
+        if (res.code != 200) {
+          message.error(res.message)
+          return
+        }
+        const{data}=res;
+        const arrPoint=data.map(item=>{
+          const{latGCJ02:lat,lngGCJ02:lng}=item;
+          return {longitude:lng,latitude:lat}
+        })
+        
+        points.value=arrPoint;
+        showTrack.value=true;
+      });
+  })
+
+</script>
+<!-- <template>
   <div
     class="map-container"
     style="width: auto; height: auto;"
@@ -179,4 +218,4 @@ const onMapInited = () => {
   border-radius: 0px !important;
   margin-bottom: 10px;
 }
-</style>
+</style> -->