支持仅显示 高精度数据
当两点间隔大于5分钟时 视为两条不同的路径 以不同样式显示
This commit is contained in:
parent
afca0a9e00
commit
aff0b6ca98
@ -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 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();
|
||||
let canvasDir = createCanvasDir();
|
||||
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() {
|
||||
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"),
|
||||
}
|
||||
function clearMap(){
|
||||
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 => {
|
||||
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 => {
|
||||
let _data = res.data || []
|
||||
|
||||
|
||||
function drawMap(){
|
||||
let _data = data.data
|
||||
|
||||
if(options.useHighAccuracyLocation){
|
||||
console.log("[仅使用高精度定位数据]")
|
||||
_data = _data.filter(item=>item.locationType === 1)
|
||||
}
|
||||
|
||||
_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()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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\//, ''),
|
||||
},
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user