组件复用以提高性能

2023-05-18 15:37:33 +08:00 · 2023-05-18 15:37:33 +08:00 · a26a5ef8af
commit a26a5ef8af
parent 453f33efea
4 changed files with 196 additions and 160 deletions
--- a/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
+++ b/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
@ -92,9 +92,10 @@
            <q-scroll-area :style="{height: view.lines.length * 22 > 250 ?'250px':view.lines.length * 22 + 'px'}" class="overflow-auto"
                            :thumb-style="scrollArea.thumbStyle"
                            :bar-style="scrollArea.barStyle">
-                <div v-for="(item,i) in view.lines" :key="i" >
-                    {{item[0].locationTime}} ~ {{item[item.length-1].locationTime}}
-                </div>
+<!--                <div v-for="(item,i) in view.lines" :key="i" >-->
+<!--                    {{item[0].locationTime}} ~ {{item[item.length-1].locationTime}}-->
+<!--                </div>-->
+                <q-option-group v-model="options.showLines" @update:model-value="changeShowLines" :options="options.lines" type="checkbox" dense></q-option-group>
            </q-scroll-area>
        </div>
    </div>
@ -115,6 +116,8 @@ import {
    loginRequest,
    logoutHandler
 } from "matrix-middle-service-web/src/views/record/logic/login";
+import {fixedLocationHandler} from "matrix-middle-service-web/src/views/record/logic/location";
+import {drawMarkers} from "matrix-middle-service-web/src/views/record/logic/markers";
 const $q = useQuasar();
 const scrollArea = reactive({
    thumbStyle: {
@ -157,9 +160,9 @@ const data = {
    polyline: {},
    polylines: [],
    fixedPolyline: {},
-    labelsLayer: {},
+    labelsLayer: null,
    markers: [],
-    tmpMarker: {},
+    tmpMarker: null,
    infoWindow: {},
 }
 const view = reactive({
@ -192,6 +195,8 @@ const options = reactive({
    useHighAccuracyLocation: true,
    showMarker: false,
    autoScaling: true,
+    lines: [],
+    showLines: [],
 })

 const authModel = reactive({
@ -243,6 +248,10 @@ function toggleTraffic() {
    }
 }

+function changeShowLines(){
+    drawMarkers(map,data,options,view.lines.filter((_,index)=>options.showLines.includes(index)))
+}
+
 AMapLoader.load({
    "key": "e01d7df3a4c3a1b8f06fa4544ddbbe9c",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
@ -324,121 +333,38 @@ function clearMap(){
    view.lines = []
    map.remove(data.polylines)
    map.remove(data.polyline)
-    map.remove(data.labelsLayer)
    map.remove(data.markers)
    map.remove(data.infoWindow)
 }


-function drawMap(){
-    let _data = data.data
-
+function drawMap(autoSelect=false){
    if(options.useHighAccuracyLocation){
        console.log("[仅使用高精度定位数据]")
-        _data = _data.filter(item=>item.locationType === 1)
+        data.data = data.data.filter(item=>item.locationType === 1)
    }

-    _data = _data.map(item=>{
+    data.data = data.data.map(item=>{
        return {
            time: moment(item.locationTime),
            ...item,
        }
    })
-    _data.sort((a,b)=>{
+    data.data.sort((a,b)=>{
        return a.time.isBefore(b.time)?-1:1
    })

-    view.filterData =  _data;
+    view.filterData =  data.data;

    view.speed.max = (getMaxSpeed(view.filterData) * 3.6).toFixed(2);
    view.speed.avg = (getAvgSpeed(view.filterData) * 3.6).toFixed(2);

-    console.log("data", _data)
-
-    data.tmpMarker = new AMap.Marker({
-        anchor: 'bottom-center',
-        offset: [0, -15],
-    });
-    let markers = _data.filter((_, index) => index % 1 === 0).map((item, index) => {
-        let text = {
-            fontSize: 10,
-            content: `时间:${item.locationTime}<br>速度: ${((item.speed || 0) * 3.6).toFixed(2)}km/h 方向角: ${(item.bearing || 0).toFixed(2)}°`
-        }
-
-        let marker = new AMap.LabelMarker({
-            name: item.id,
-            position: [item.longitude, item.latitude],
-            zIndex: 10,
-            icon: {
-                // 图标类型，现阶段只支持 image 类型
-                type: 'image',
-                // 图片 url
-                image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
-                // 图片尺寸
-                size: [6, 9],
-                // 图片相对 position 的锚点，默认为 bottom-center
-                anchor: 'bottom-center'
-            },
-            // text,
-        })
-
-        function show(e) {
-            let position = e.data.data && e.data.data.position;
-
-            if (position) {
-                data.tmpMarker.setContent(
-                    `<div class="amap-info-window"
-                                    style="padding: .75rem 1.25rem;font-size:12px;
-                                    margin-bottom: 1rem;
-                                    border-radius: .25rem;
-                                    position: fixed;
-                                    top: 1rem;
-                                    background-color: white;
-                                    width: auto;
-                                    min-width: 22rem;
-                                    border-width: 0;
-                                    right: 1rem;
-                                    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);">`
-                    + text.content +
-                    '<div class="amap-info-sharp"></div>' +
-                    '</div>');
-                data.tmpMarker.setPosition(position);
-                map.add(data.tmpMarker);
-            }
-        }
-
-        function hide() {
-            map.remove(data.tmpMarker);
-        }
-
-        marker.on('mouseover', (e)=>show(e));
-        marker.on('touchstart', (e)=>show(e));
-        marker.on('mouseout', ()=>hide());
-        marker.on('touchend', ()=>hide());
-
-        return marker;
-    })
-    data.markers = markers
-
-    let labelsLayer = new AMap.LabelsLayer({
-        zooms: [3, 20],
-        zIndex: 1000,
-        // 该层内标注是否避让
-        collision: true,
-        // 设置 allowCollision：true，可以让标注避让用户的标注
-        allowCollision: false,
-    });
-    data.labelsLayer = labelsLayer
-
-    if(options.showMarker){
-        labelsLayer.add(markers)
-        map.add(data.labelsLayer)
-    }
+    console.log("data", data.data)

    view.lines = []
    let prev = moment(0)
-    for (let i = 0; i < _data.length; i++) {
-        let datum = _data[i]
+    for (let i = 0; i < data.data.length; i++) {
+        let datum = data.data[i]

        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
@ -448,9 +374,21 @@ function drawMap(){
        }
        view.lines[view.lines.length -1].push(datum)
    }
+    options.lines = view.lines.map((item,index)=>{
+        if(autoSelect){
+            // 默认选中
+            options.showLines.push(index)
+        }

+        return {
+            label: `${item[0].locationTime} ~ ${item[item.length-1].locationTime}`,
+            value: index,
+        }
+    })
    console.log("lines", view.lines)

+    drawMarkers(map,data,options,view.lines.filter((_,index)=>options.showLines.includes(index)))
+
    let colorList = randomColorList(view.lines.length)
    data.polylines = []
    view.lines.forEach((_data,index) => {
@ -517,7 +455,8 @@ function search() {
        return resp.data;
    }).then(res => {
        data.data = res.data || []
-        drawMap()
+        options.showLines = []
+        drawMap(true)
    })
 }

@ -527,67 +466,7 @@ function fixedLocation() {
    if (!feature.showFixed) {
        return
    }
-
-    let task = []
-    let startTime
-    let preFixedData = (data.data || []).map((item, index) => {
-        if (index % 500 === 0) {
-            startTime = data.data[0].time
-        }
-
-        let time = item.time
-        return {
-            x: item.longitude,
-            y: item.latitude,
-            sp: item.speed || 0,
-            ag: item.bearing || 0,
-            tm: index % 500 === 0 ? time.unix() : time.diff(startTime, 's')
-        }
-    })
-    console.log("纠偏路线 预处理数据: ", preFixedData)
-
-    let group = []
-    let len = preFixedData.length
-    for (let i = 0; i < Math.ceil(len / 500); i++) {
-        group.push(preFixedData.splice(0, 500))
-    }
-    console.log("分组: ", group)
-
-    task = group.map(item => {
-        return new Promise(resolve => {
-            AMap.plugin('AMap.GraspRoad', function () {
-                let grasp = new AMap.GraspRoad();
-                grasp.driving(item, function (error, result) {
-                    if (error) {
-                        resolve([])
-                    }
-                    if (!error) {
-                        let newPath = result.data.points;//纠偏后的轨迹
-                        let distance = result.data.distance;//里程
-
-                        console.log("返回值 => ", "路径: ", newPath, "里程: ", distance)
-                        resolve(newPath)
-                    }
-                })
-            })
-        })
-    })
-
-    Promise.all(task).then(paths => {
-        let fixedData = paths.flat(1)
-        console.log("纠偏路线数据: ", fixedData)
-
-        data.fixedPolyline = new AMap.Polyline({
-            path: fixedData.map(item => {
-                return new AMap.LngLat(item.x, item.y)
-            }),
-            showDir: true,
-            strokeColor: 'orange', // 线条颜色
-            borderWeight: 6, // 线条宽度，默认为 1
-            strokeWeight: 6,
-        })
-        map.add(data.fixedPolyline)
-    })
+    fixedLocationHandler(map,data)
 }
 </script>

--- a/frontend/matrix-middle-service-web/src/views/record/logic/location.ts
+++ b/frontend/matrix-middle-service-web/src/views/record/logic/location.ts
@ -0,0 +1,65 @@
+export function fixedLocationHandler(map,data) {
+    console.log(map,data)
+    let task:Promise<any>[] = []
+    let startTime
+    let preFixedData = (data.data || []).map((item, index) => {
+        if (index % 500 === 0) {
+            startTime = data.data[0].time
+        }
+
+        let time = item.time
+        return {
+            x: item.longitude,
+            y: item.latitude,
+            sp: item.speed || 0,
+            ag: item.bearing || 0,
+            tm: index % 500 === 0 ? time.unix() : time.diff(startTime, 's')
+        }
+    })
+    console.log("纠偏路线 预处理数据: ", preFixedData)
+
+    let group:any[] = []
+    let len = preFixedData.length
+    for (let i = 0; i < Math.ceil(len / 500); i++) {
+        group.push(preFixedData.splice(0, 500))
+    }
+    console.log("分组: ", group)
+
+    task = group.map(item => {
+        return new Promise(resolve => {
+            AMap.plugin('AMap.GraspRoad', function () {
+                let grasp = new AMap.GraspRoad();
+                grasp.driving(item, function (error, result) {
+                    if (error) {
+                        resolve([])
+                    }
+                    if (!error) {
+                        let newPath = result.data.points;//纠偏后的轨迹
+                        let distance = result.data.distance;//里程
+
+                        console.log("返回值 => ", "路径: ", newPath, "里程: ", distance)
+                        resolve(newPath)
+                    }
+                })
+            })
+        })
+    })
+
+    Promise.all(task).then(paths => {
+        let fixedData = paths.flat(1)
+        console.log("纠偏路线数据: ", fixedData)
+
+        data.fixedPolyline = new AMap.Polyline({
+            path: fixedData.map(item => {
+                return new AMap.LngLat(item.x, item.y)
+            }),
+            showDir: true,
+            strokeColor: 'orange', // 线条颜色
+            borderWeight: 6, // 线条宽度，默认为 1
+            strokeWeight: 6,
+        })
+        map.add(data.fixedPolyline)
+    })
+}
+
+
--- a/frontend/matrix-middle-service-web/src/views/record/logic/markers.ts
+++ b/frontend/matrix-middle-service-web/src/views/record/logic/markers.ts
@ -0,0 +1,91 @@
+export function getMarkers(map,data,line){
+    if(!data.tmpMarker){
+        data.tmpMarker = new AMap.Marker({
+            anchor: 'bottom-center',
+            offset: [0, -15],
+        });
+    }
+    return line.filter((_, index) => index % 1 === 0).map((item) => {
+        let text = {
+            fontSize: 10,
+            content: `时间:${item.locationTime}<br>速度: ${((item.speed || 0) * 3.6).toFixed(2)}km/h 方向角: ${(item.bearing || 0).toFixed(2)}°`
+        }
+
+        let marker = new AMap.LabelMarker({
+            name: item.id,
+            position: [item.longitude, item.latitude],
+            zIndex: 10,
+            icon: {
+                // 图标类型，现阶段只支持 image 类型
+                type: 'image',
+                // 图片 url
+                image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+                // 图片尺寸
+                size: [6, 9],
+                // 图片相对 position 的锚点，默认为 bottom-center
+                anchor: 'bottom-center'
+            },
+            // text,
+        })
+
+        function show(e) {
+            let position = e.data.data && e.data.data.position;
+
+            if (position) {
+                data.tmpMarker.setContent(
+                    `<div class="amap-info-window"
+                                    style="padding: .75rem 1.25rem;font-size:12px;
+                                    margin-bottom: 1rem;
+                                    border-radius: .25rem;
+                                    position: fixed;
+                                    top: 1rem;
+                                    background-color: white;
+                                    width: auto;
+                                    min-width: 22rem;
+                                    border-width: 0;
+                                    right: 1rem;
+                                    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);">`
+                    + text.content +
+                    '<div class="amap-info-sharp"></div>' +
+                    '</div>');
+                data.tmpMarker.setPosition(position);
+                map.add(data.tmpMarker);
+            }
+        }
+
+        function hide() {
+            map.remove(data.tmpMarker);
+        }
+
+        marker.on('mouseover', (e) => show(e));
+        marker.on('touchstart', (e) => show(e));
+        marker.on('mouseout', () => hide());
+        marker.on('touchend', () => hide());
+
+        return marker;
+    });
+}
+
+export function drawMarkers(map,data,options,lines){
+    if(!data.labelsLayer){
+        data.labelsLayer = new AMap.LabelsLayer({
+            zooms: [3, 20],
+            zIndex: 1000,
+            // 该层内标注是否避让
+            collision: true,
+            // 设置 allowCollision：true，可以让标注避让用户的标注
+            allowCollision: false,
+        });
+        map.add(data.labelsLayer)
+    }
+    data.labelsLayer.remove(data.markers)
+    data.markers = []
+
+    if(!options.showMarker){
+        return
+    }
+    data.markers = lines.map(line=>{
+        return getMarkers(map,data,line)
+    }).flat()
+    data.labelsLayer.add(data.markers)
+}
--- a/frontend/matrix-middle-service-web/tsconfig.json
+++ b/frontend/matrix-middle-service-web/tsconfig.json
@ -17,7 +17,7 @@
    ],
    "lib": [
      "ESNext",
-      "DOM",
+      "DOM"
    ],
    "skipLibCheck": true,
    "noEmit": true,
@ -31,7 +31,8 @@
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
-    "src/**/*.vue"
+    "src/**/*.vue",
+    "node_modules/@amap/amap-jsapi-loader/src/global.d.ts"
  ],
  "references": [
    {