支持仅显示 高精度数据

当两点间隔大于5分钟时 视为两条不同的路径 以不同样式显示

frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue

@@ -8,6 +8,14 @@
         <q-btn @click="search">查询</q-btn>
     </div>
     <div class="flex justify-end flex-wrap items-center p-1">
+        <q-toggle
+                label="仅使用高精度定位"
+                v-model="options.useHighAccuracyLocation"
+                color="primary"
+                @update:model-value="toggleUseHighAccuracyLocation"
+                keep-color
+        />
+
         <q-toggle
             label="卫星地图"
             v-model="layers.satellite.show"
@@ -50,25 +58,14 @@ import {useQuasar} from "quasar";
 import moment from "moment";
 import {auth} from "matrix-middle-service-web/src/api/auth/index";
 import {locationRecord} from "matrix-middle-service-web/src/api/location/record/index";
+import {createCanvasDir} from "matrix-middle-service-web/src/views/record/logic/icon";
 const $q = useQuasar();
 const COLOR = [
     '#6090e0', '#30c030', '#d070d0', '#80c0f0', '#f07050', '#ffb900',
     '#37a2da', '#ffdb5c', '#8378ea', '#e7bcf3', '#32c5e9', '#67e0e3',
     '#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78',
 ]
-let canvasDir = document.createElement('canvas')
+let canvasDir = createCanvasDir();
-let width = 24;
-let height = 24;
-canvasDir.width = width;
-canvasDir.height = height;
-let context = canvasDir.getContext('2d');
-context.strokeStyle = 'white';
-context.lineJoin = 'round';
-context.lineWidth = 8;
-context.moveTo(-4, width - 4);
-context.lineTo(width / 2, 6);
-context.lineTo(width + 4, width - 4);
-context.stroke();
 const date = ref({
     from: moment().startOf('d').format("YYYY-MM-DD HH:mm:ss"),
     to: moment().format("YYYY-MM-DD HH:mm:ss"),
@@ -101,6 +98,9 @@ const layers = reactive({
         show: false,
     }
 })
+const options = reactive({
+    useHighAccuracyLocation: true
+})
 
 const authModel = reactive({
     account: "",
@@ -131,6 +131,11 @@ function login(){
     })
 }
 
+function toggleUseHighAccuracyLocation(){
+    clearMap()
+    drawMap()
+}
+
 function toggleSatellite(){
     if (layers.satellite.show) {
         layers.satellite.inst.show()
@@ -229,42 +234,22 @@ AMapLoader.load({
     console.log(e);
 })
 
-function search() {
+function clearMap(){
-    console.log(date.value)
-    let params = {
-        startTime: !date.value.from ? undefined : moment(date.value.from).format("YYYY-MM-DD HH:mm:ss"),
-        endTime: !date.value.to ? undefined : moment(date.value.to).format("YYYY-MM-DD HH:mm:ss"),
-    }
     map.remove(data.polylines)
     map.remove(data.polyline)
     map.remove(data.labelsLayer)
     map.remove(data.markers)
+}
 
-    let labelsLayer = new AMap.LabelsLayer({
-        zooms: [3, 20],
-        zIndex: 1000,
-        // 该层内标注是否避让
-        collision: true,
-        // 设置 allowCollision：true，可以让标注避让用户的标注
-        allowCollision: false,
-    });
-    data.labelsLayer = labelsLayer
 
-    locationRecord.list(params).then(resp => {
+function drawMap(){
-        if(resp.status !== 200){
+    let _data = data.data
-            console.log(resp)
+
-            let res = resp.data || {}
+    if(options.useHighAccuracyLocation){
-            $q.notify({
+        console.log("[仅使用高精度定位数据]")
-                position: "top",
+        _data = _data.filter(item=>item.locationType === 1)
-                color: 'negative',
-                message: res.data || res.msg || "请求失败",
-                icon: 'report_problem'
-            })
-            throw new Error("请求失败")
     }
-        return resp.data;
+
-    }).then(res => {
-        let _data = res.data || []
     _data = _data.map(item=>{
         return {
             time: moment(item.locationTime),
@@ -274,7 +259,7 @@ function search() {
     _data.sort((a,b)=>{
         return a.time.isBefore(b.time)?-1:1
     })
-        data.data = _data
+
     console.log("data", _data)
 
     data.tmpMarker = new AMap.Marker({
@@ -341,27 +326,41 @@ function search() {
         return marker;
     })
     data.markers = markers
+
+    let labelsLayer = new AMap.LabelsLayer({
+        zooms: [3, 20],
+        zIndex: 1000,
+        // 该层内标注是否避让
+        collision: true,
+        // 设置 allowCollision：true，可以让标注避让用户的标注
+        allowCollision: false,
+    });
+    data.labelsLayer = labelsLayer
     labelsLayer.add(markers)
     map.add(data.labelsLayer)
 
-        let days = []
+    let lines = []
     let prev = moment(0)
     for (let i = 0; i < _data.length; i++) {
         let datum = _data[i]
 
-            if (prev.year() === datum.time.year() && prev.month() === datum.time.month() && prev.date() === datum.time.date() ) {
+        console.log(prev,datum.time, datum.time.diff(prev,'m') <= 5)
+
+        if (prev.year() === datum.time.year() && prev.month() === datum.time.month() && prev.date() === datum.time.date() && datum.time.diff(prev,'m') <= 5 ) {
             prev = datum.time
         } else {
             prev = datum.time
-                days.push([])
+            lines.push([])
         }
-            days[days.length -1].push(datum)
+        lines[lines.length -1].push(datum)
     }
 
-        let colorList = Array.from({ length: days.length })
+    console.log("lines", lines)
+
+    let colorList = Array.from({ length: lines.length })
         .map(() => COLOR[Math.floor(Math.random() * COLOR.length)]);
     data.polylines = []
-        days.forEach((_data,index) => {
+    lines.forEach((_data,index) => {
         let path = _data.map((item) => {
             return new AMap.LngLat(item.longitude, item.latitude)
         })
@@ -397,6 +396,32 @@ function search() {
         }
     })
     fixedLocation()
+}
+
+function search() {
+    console.log(date.value)
+    let params = {
+        startTime: !date.value.from ? undefined : moment(date.value.from).format("YYYY-MM-DD HH:mm:ss"),
+        endTime: !date.value.to ? undefined : moment(date.value.to).format("YYYY-MM-DD HH:mm:ss"),
+    }
+
+    clearMap();
+    locationRecord.list(params).then(resp => {
+        if(resp.status !== 200){
+            console.log(resp)
+            let res = resp.data || {}
+            $q.notify({
+                position: "top",
+                color: 'negative',
+                message: res.data || res.msg || "请求失败",
+                icon: 'report_problem'
+            })
+            throw new Error("请求失败")
+        }
+        return resp.data;
+    }).then(res => {
+        data.data = res.data || []
+        drawMap()
     })
 }
 

frontend/matrix-middle-service-web/src/views/record/logic/icon.ts

@@ -0,0 +1,18 @@
+export function createCanvasDir(){
+    let canvasDir = document.createElement('canvas')
+    let width = 24;
+    let height = 24;
+    canvasDir.width = width;
+    canvasDir.height = height;
+
+    let context = canvasDir.getContext('2d')!;
+    context.strokeStyle = 'white';
+    context.lineJoin = 'round';
+    context.lineWidth = 8;
+    context.moveTo(-4, width - 4);
+    context.lineTo(width / 2, 6);
+    context.lineTo(width + 4, width - 4);
+    context.stroke();
+
+    return canvasDir;
+}

frontend/matrix-middle-service-web/vite.config.ts

@@ -11,7 +11,8 @@ export default defineConfig({
         port: 7868,
         proxy:{
             "^/api/.*":{
-                target: "http://10.10.10.20:45680/",
+                // target: "http://10.10.10.20:45680/",
+                target: "http://10.10.10.200:45680/",
                 rewrite: (path) => path.replace(/^\/api\//, ''),
             },
         }