diff --git a/src/views/xuncha/components/inspection.vue b/src/views/xuncha/components/inspection.vue index 755387e..f835e41 100644 --- a/src/views/xuncha/components/inspection.vue +++ b/src/views/xuncha/components/inspection.vue @@ -41,10 +41,12 @@ import { patrolTaskFinishPatrol, PatrolTaskID } from '@/api/xuncha'; import CoordTransform from '@/utils/gis/CoorTransform.js'; import WKT from 'terraformer-wkt-parser'; +import * as turf from '@turf/turf'; import { useRouter, useRoute } from 'vue-router'; import { useStore } from '@/pinia/store.js'; import TaskForm from './TaskForm'; // 表单组件 import newFiberMapBox from '@/views/xuncha/gisCommonPage/newFiberMapBox.vue'; +import user from '@/assets/images/patroLog/user.png'; const router = useRouter(); const route = useRoute(); const pinias = useStore(); @@ -99,6 +101,7 @@ lon: null, lat: null, }, //储存的旧数据 + currentPath: [], }); /** @@ -173,10 +176,73 @@ } // 开始巡检--阶段性获取经纬度变化信息 const startGetPosition = () => { + getPostionNow(); + newfiberMap.map.setCenter(AllData.PostionValue.lonLat.split(',').map(Number)); AllData.IntervalKry = setInterval(() => { getPostionNow(); + console.log('AllData.PostionValue.lonLat--', AllData.PostionValue.lonLat); + AllData.currentPath.push(AllData.PostionValue.lonLat.split(',').map(Number)); + //渲染当前位置 + let currentPositionGeojson = { + type: 'FeatureCollection', + features: [turf.point(AllData.PostionValue.lonLat.split(',').map(Number))], + }; + if (!newfiberMap.map.getLayer('currentPosition')) { + addCurrentPoint(currentPositionGeojson, 'currentPosition', user); + } else { + newfiberMap.map.getSource('currentPosition').setData(currentPositionGeojson); + } + if (AllData.currentPath.leng > 1) { + let currentPathGeojson = { + type: 'FeatureCollection', + features: [turf.lineString(AllData.currentPath)], + }; + if (!newfiberMap.map.getLayer('currentLine')) { + addCurrentLine(currentPathGeojson, 'currentLine'); + } else { + newfiberMap.map.getSource('currentLine').setData(currentPathGeojson); + } + } }, 3000); }; +//添加轨迹线 +const addCurrentLine = (geojson, layerId) => { + newfiberMap.map.addSource(layerId, { + type: 'geojson', + data: geojson, + }); + newfiberMap.map.addLayer({ + id: layerId, + type: 'line', + source: layerId, + paint: { + 'line-color': 'rgba(35, 217, 110,1)', + 'line-width': 3, + }, + }); +}; +//绘制当前坐标点 +const addCurrentPoint = (geojson, layerId, Icon) => { + newfiberMap.map.loadImage(Icon, (error, image) => { + if (error) throw error; + newfiberMap.map.addImage(layerId + 'icon', image); + }); + newfiberMap.map.addSource(layerId, { + type: 'geojson', + data: geojson, + }); + newfiberMap.map.addLayer({ + id: layerId, + type: 'symbol', + source: layerId, + layout: { + 'icon-image': layerId + 'icon', + 'icon-size': 0.2, + 'icon-offset': [0, 0], + 'icon-allow-overlap': true, + }, + }); +}; /** * 获取当前定位 */ @@ -191,10 +257,10 @@ getCurrentPositon((lng, lat, address) => { // console.log('获取安卓定位参数--', address); let timer = timestampToTime(Date.now()); - //let NewLonLat = CoordTransform.gcj02towgs84(Number(lng), Number(lat)); + let NewLonLat = CoordTransform.gcj02towgs84(Number(lng), Number(lat)); AllData.PostionValue = { patrolDatetime: timer, - lonLat: lng + ',' + lat, + lonLat: NewLonLat[0] + ',' + NewLonLat[1], refType: 'patrolLog', refid: AllData.patrolLogId, userName: pinias.userName, @@ -222,6 +288,7 @@ // AllData.patrolLogId = '1630380590036803588' startGetPosition(); //开始获取原生定位 sendSocketMessage(); //安卓、ios原生发送websocket + //clearInterval(AllData.IntervalKry); } }); };