骑行轨迹展示

ebike-operate/src/views/FinanCecenter/RefundApplication/CyclingOrder/index.vue

@@ -869,6 +869,8 @@ const viewOrderInfo = (record) => {
         ebikeCode: record['ebikeCode'],
         startTime: record['startTime'],
         endTime: record['endTime'],
+        ridePoint: record['ridePoint'],
+        returnPoint: record['returnPoint'],
       }
       formModelOrderInfo.value.openForm(params);
     } else {

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

@@ -5,23 +5,30 @@
   >
     <tlbs-map
       ref="mapRef"
-      :api-key="config.map.apiKey"
+      api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
       :center="center"
-      zoom="16"
+      :zoom="zoom"
       :control="control"
-      :options="options"
+      @click="onClick"
       @map_inited="onMapInited"
     >
-      <tlbs-geometry-editor
-        ref="editorRef"
-        action-mode="draw"
-        selectable
-        @draw_complete="onDrowComplet"
-        @draw_error="onDrawError"
-        @adjust_complete="onAdjustComplete"
-        @adjust_error="onAdjustError"
-        @delete_complete="onDeleteComplete"
+      <tlbs-multi-polyline
+        ref="polylineRef"
+        :geometries="geometriesLine"
+        :styles="styles"
+        :options="options"
       />
+      <tlbs-multi-marker
+        ref="markerRef"
+        :geometries="geometriesPoint"
+        :styles="styles"
+        :options="options"
+      />
+      <div class="control-container">
+        <button @click.stop="getLayerInstance">
+          打印折线实例
+        </button>
+      </div>
     </tlbs-map>
   </div>
 </template>
@@ -44,11 +51,42 @@ const props = defineProps({
 });
 
 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 points = ref([])
+const polylineRef = ref(null);
+const center = ref({ lat: 0, lng: 0 });
+const zoom = ref(16);
+
+const control = ref({
+  scale: {},
+  zoom: {
+    position: 'topRight',
+  },
+});
+
+const geometriesLine = ref([]);
+const geometriesPoint = ref([]);
+
+const styles = ref({
+  polyline: {
+    color: '#2C68FF', // 线填充色
+    borderWidth: 1, // 边线宽度
+    borderColor: '#004EE1', // 边线颜色
+  },
+  markerStart: {
+    width: 40,
+    height: 40,
+    src: '/src/assets/startPoint.png'
+  },
+  markerEnd: {
+    width: 40,
+    height: 40,
+    src: '/src/assets/endPoint.png'
+  },
+});
+
+const options = ref({
+  zIndex: 1,
+});
+
 const onMapInited = () => {
   if (mapRef.value) {
     const windowWidth = window.innerWidth;
@@ -71,47 +109,42 @@ const onMapInited = () => {
           return
         }
         if (res.data) {
-          points.value = res.data
-          loadGeometry();
+          center.value = { lat: props.orderParams.ridePoint.split(",")[1], lng: props.orderParams.ridePoint.split(",")[0] }
+          const trajectory = [{ lat: props.orderParams.ridePoint.split(",")[1], lng: props.orderParams.ridePoint.split(",")[0] }];
+          res.data.map(item => {
+            trajectory.push({ lat: item['latitude'], lng: item['longitude'] })
+          })
+          trajectory.push({ lat: props.orderParams.returnPoint.split(",")[1], lng: props.orderParams.returnPoint.split(",")[0] })
+          geometriesLine.value = [
+            {
+              id: 'polyline1',
+              styleId: 'polyline',
+              paths: trajectory,
+              properties: {
+                title: 'polyline',
+              },
+            }
+          ]
+
+          geometriesPoint.value = [
+            {
+              styleId: 'markerStart', position: {
+                lat: parseFloat(props.orderParams.ridePoint.split(",")[1]),
+                lng: parseFloat(props.orderParams.ridePoint.split(",")[0])
+              }
+            },
+            {
+              styleId: 'markerEnd', position: {
+                lat: parseFloat(props.orderParams.returnPoint.split(",")[1]),
+                lng: parseFloat(props.orderParams.returnPoint.split(",")[0])
+              }
+            },
+          ]
         }
       });
     }
   }
 };
-const loadGeometry = () => {
-
-  if (points.value.length > 0) {
-    const circleGeometries = [];//editorRef.value.circle.getGeometries();
-    if (circleGeometries.length > 0) {
-      circleGeometries.forEach((geometry) => {
-        editorRef.value.circle.remove(geometry); // 删除之前的图形数据
-      });
-    }
-    const trajectory = points.value.map(item => {
-      return new TMap.LatLng(item['latitude'], item['longitude'])
-    })
-    const shapeId = getGUID()
-    circleGeometries.push({
-      id: shapeId,
-      style: new TMap.PolylineStyle({
-        'color': '#blue', //线填充色
-        'width': 6, //折线宽度
-        'borderWidth': 5, //边线宽度
-        'borderColor': 'red', //边线颜色
-        'lineCap': 'round' //线端头方式
-      }),
-      paths: trajectory,
-      center: new TMap.LatLng(points.value[0].latitude, points.value[0].longitude),
-    });
-    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, // 设置地图边界的内边距
-    });
-  }
-}
 
 </script>
 

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

@@ -43,6 +43,8 @@ const openForm = (params = {}) => {
     orderParams.value['ebikeCode'] = params['ebikeCode'];
     orderParams.value['startTime'] = params['startTime'];
     orderParams.value['endTime'] = params['endTime'];
+    orderParams.value['ridePoint'] = params['ridePoint'];
+    orderParams.value['returnPoint'] = params['returnPoint'];
   }
 };