diff --git a/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue b/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue index 804b2e0..4209d6e 100644 --- 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 @@ -
- {{item[0].locationTime}} ~ {{item[item.length-1].locationTime}} -
+ + + + @@ -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}
速度: ${((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( - `
` - + text.content + - '
' + - '
'); - 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) } diff --git a/frontend/matrix-middle-service-web/src/views/record/logic/location.ts b/frontend/matrix-middle-service-web/src/views/record/logic/location.ts new file mode 100644 index 0000000..4cf45f7 --- /dev/null +++ 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[] = [] + 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) + }) +} + + diff --git a/frontend/matrix-middle-service-web/src/views/record/logic/markers.ts b/frontend/matrix-middle-service-web/src/views/record/logic/markers.ts new file mode 100644 index 0000000..f13fa59 --- /dev/null +++ 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}
速度: ${((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( + `
` + + text.content + + '
' + + '
'); + 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) +} diff --git a/frontend/matrix-middle-service-web/tsconfig.json b/frontend/matrix-middle-service-web/tsconfig.json index 2dd8138..2cb4f5f 100644 --- 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": [ {