import { getRoot } from '/@/root' import hardstandSrc from '/@/assets/icons/hardstand.png' import droneIcon from '/@/assets/icons/drone.png' import { wgs84togcj02 } from '../vendors/coordtransform' import rootStore from '/@/store' export function useGMapTrajectory() { const root = getRoot(); let AMap = root.$aMap; const store = rootStore; const coverMap = store.state.coverMap; // 绘制轨迹 const drawTrajectory = (list: any[]) => { const paths = list.map(item => item.paths); if (!paths.length) { return; } // 绘制起点图标 const startPosition = paths[0]; const startIcon = new AMap.Icon({ size: new AMap.Size(30, 30), image: hardstandSrc, imageSize: new AMap.Size(30, 30) }) const startMarker = new AMap.Marker({ position: new AMap.LngLat(startPosition[0], startPosition[startPosition.length - 1]), icon: startIcon, offset: new AMap.Pixel(-20, -35),// 位置偏移 }) // 绘制轨迹折线 const polyline = new AMap.Polyline({ path: paths, strokeColor: '#2D8CF0', showDir: true,// 显示路线白色方向箭头 strokeOpacity: 1,// 轮廓线透明度 strokeWeight: 6,//线宽 strokeStyle: 'solid', }) const serialList = list.filter((item) => item.show_point); // 序号 const text = serialList.map((item, index) => { return new AMap.Text({ position: new AMap.LngLat(item.paths[0], item.paths[1]), offset: new AMap.Pixel(-8, -30), text: index + 1, style: { backgroundColor: 'transparent', borderColor: 'transparent', } }) }) // 序号下方圆形标记 const circles = serialList.map((item) => { return new AMap.Circle({ center: new AMap.LngLat(item.paths[0], item.paths[1]), radius: 0.5, // 半径 fillColor: 'white', fillOpacity: 1, strokeWeight: 2, }); }) // 计算并显示每段线的距离 const distances = []; const serialPaths = serialList.map(item => item.paths) for (let i = 0; i < serialPaths.length - 1; i++) { const distance = AMap.GeometryUtil.distance(new AMap.LngLat(serialPaths[i][0], serialPaths[i][1]), new AMap.LngLat(serialPaths[i + 1][0], serialPaths[i + 1][1])); // 计算两个点之间的中点坐标 const midLng = (serialPaths[i][0] + serialPaths[i + 1][0]) / 2; const midLat = (serialPaths[i][1] + serialPaths[i + 1][1]) / 2; const midPoint = new AMap.LngLat(midLng, midLat); // 在中点位置放置文本以显示距离 const distanceText = new AMap.Text({ position: midPoint, offset: new AMap.Pixel(-16, 10), text: `${distance.toFixed(1)} m`,// 距离 style: { fontSize: '10px', color: '#FFFFFF', backgroundColor: 'rgba(0, 0, 0, 0.75)', borderColor: 'transparent', }, }); distances.push(distanceText); } const other = [startMarker, polyline, ...text, ...circles, ...distances]; root.$map.add(other); // 自动缩放地图到合适的视野级别 root.$map.setFitView(other); } // 绘制动态轨迹 const drawDynamicTrajectory = (sn: string, deviceInfo: any, host: any[]) => { if (coverMap[sn] && coverMap[sn].length) {// 如果地图已经画过了,先清除掉之前的绘画结果 coverMap[sn].forEach(cover => root.$map.remove(cover)) coverMap[sn] = [] } const list = host.map((item: any) => { const data = { ...item, paths: wgs84togcj02(item.longitude, item.latitude), } delete data.latitude; delete data.longitude; return data; }); const paths = list.map(item => item.paths); if (!paths.length) { return; } // 绘制轨迹折线 const polyline = new AMap.Polyline({ path: paths, strokeColor: '#2D8CF0', showDir: true,// 显示路线白色方向箭头 strokeOpacity: 1,// 轮廓线透明度 strokeWeight: 6,//线宽 strokeStyle: 'solid', }) const other = [polyline] // 获取起飞点 const homeList = list.filter(item => item.type === 0); if (homeList.length) { const startPosition = homeList[0].paths; const startIcon = new AMap.Icon({ size: new AMap.Size(30, 30), image: hardstandSrc, imageSize: new AMap.Size(30, 30) }) const startMarker = new AMap.Marker({ position: new AMap.LngLat(startPosition[0], startPosition[startPosition.length - 1]), icon: startIcon, offset: new AMap.Pixel(-20, -35),// 位置偏移 }) other.push(startMarker); } // 绘制小飞机图标 if (list.length) { const path = list[list.length - 1].paths; const angle = deviceInfo.attitude_head;// 角度 const startIcon = new AMap.Icon({ size: new AMap.Size(40, 40), image: droneIcon, imageSize: new AMap.Size(40, 40) }) const endMarker = new AMap.Marker({ position: new AMap.LngLat(path[0], path[path.length - 1]), icon: startIcon, offset: new AMap.Pixel(-20, -20),// 位置偏移 angle: angle,// 旋转角度 }) other.push(endMarker); } root.$map.add(other) coverMap[sn] = [other] } return { drawTrajectory, drawDynamicTrajectory } }