先看效果图
实现步骤
获取点
在editHelper中获取静止的路线
获取的路线数据如下：
// 挪动线路const __gps_pos: any = [ [ [-810.738647, 717.010071, -59.492908], [-785.508789, 689.994446, -59.129532], [-766.73468, 663.347046, -59.234707], [-744.801147, 632.33783, -59.748535], [-719.56073, 610.327332, -59.312965], [-704.834167, 589.367798, -59.996193], [-712.187317, 567.8703, -59.428688], [-715.610535, 537.334045, -59.68029], [-694.750061, 510.01828, -59.334183], [-669.627441, 490.004364, -59.930313], [-654.678162, 463.250793, -59.852203], [-645.085815, 434.748444, -59.852203], [-643.587769, 405.069061, -59.92424], [-647.100525, 364.79718, -59.699371] ], [ [-665.346191, 472.635315, -60.507705688476563], [-689.566528, 504.515778, -60.507705688476563], [-718.146179, 537.280029, -60.507705688476563], [-715.852539, 558.111084, -60.507705688476563], [-702.994385, 584.205811, -60.507705688476563], [-683.715515, 581.828125, -60.507705688476563], [-653.635437, 565.906433, -60.507705688476563], [-578.884033, 515.64563, -60.507705688476563], [-520.529236, 479.109985, -60.507705688476563], [-476.53598, 450.44281, -60.507705688476563] ]]获取车辆图层
// 获取图层树const res = await __g.infoTree.get()// 获取矿车idmainCarId = res.infotree.filter((item: any) => item.name === '矿车')[0].iD// 获取图层const objRes = await __g.tileLayer.getObjectIDs(mainCarId)// 获取图层内对象idobjId = objRes.data[0].objectIds[0]暗藏多余图层
let infoArr, hideArrconst needHideArr: any = ['矿车', '矿坑轮廓线', '矿坑热力', '隧道场景', '智慧农业_底图', '智慧农业_底图分块', '智慧农业地质层', '智慧环保底板特效']/** * 暗藏图层 */const hideNeed = async () => { // 获取图层树 infoArr = await __g.infoTree.get() // 过滤须要显示的图层 hideArr = infoArr.infotree.filter((item: any) => needHideArr.includes(item.name)).map((item: any) => item.iD) // 暗藏图层 await __g.infoTree.hide(hideArr)}增加矿车
/** * 增加矿车 * @param location 地位 * @param id 车辆id * @param rotation 旋转角度 */const addCar = async (location: number[], id: string, rotation = [0, 0, 0]) => { await __g.customObject.addByTileLayer({ id, tileLayerId: mainCarId, //留神5.3新增个性：数组参数 objectId: [objId], location, rotation, smoothMotion: 1 //1: 平滑插值，0: 跳跃 })}增加mark标签
/** * 增加标签 * @param id * @param coordinate 坐标 * @param text 文本 */const addMark = async (id: string, coordinate: any, text = '矿车-正在工作') => { // 创立标签 const markerObj = { id, groupId: 'markerAdd', coordinate, //坐标地位 coordinateType: 0, //默认0是投影坐标系，也能够设置为经纬度空间坐标系值为1 range: [1, 100000], //可视范畴 fixedSize: true, //图片固定尺寸，取值范畴：false 自适应，近大远小，true 固定尺寸，默认值：false text, //显示的文字 useTextAnimation: true, //关上文字开展动画成果 textRange: [1, 100000], //文本可视范畴[近裁间隔, 远裁间隔] textOffset: [0, 0], // 文本偏移 textBackgroundColor: [1.0, 1.0, 1.0, 0.5], //文本背景色彩 fontSize: 12, //字体大小 fontColor: Color.White, //字体色彩 popupURL: `${window.origin}/tag/showWorkState.html?`, //弹窗HTML链接 popupBackgroundColor: [1.0, 1.0, 1.0, 1.0], //弹窗背景色彩 popupSize: [500, 350], //弹窗大小 popupOffset: [0, 0], //弹窗偏移 autoHidePopupWindow: true, //失去焦点后是否主动敞开弹出窗口 autoHeight: true, // 主动判断下方是否有物体 displayMode: 4, //显示模式 clusterByImage: true, // 聚合时是否依据图片门路分类，即当多个marker的imagePath门路参数雷同时按门路对marker分类聚合 priority: 1, //避让优先级 occlusionCull: false //是否参加遮挡剔除 } await __g.marker.add(markerObj)}车辆挪动
/** * 增加平移 * @param carNumber 第几辆车 * @param carId 车辆id */const addMove = async (carNumber: number, carId: string) => { // 开始平移 const pathPointArr = [] for (let i = 0; i < __gps_pos[carNumber].length; i++) { //结构数组元素 每2秒挪动一次 const elementPoint = { time: i * 2, coordinate: __gps_pos[carNumber][i] } pathPointArr.push(elementPoint) } //设置追随相机 __g.customObject.setRotation(carId, [0, -90, 0]) //车辆按GPS轨迹挪动 __g.customObject.startMove(carId, 0, pathPointArr)}设置标签追随
// 设置标签追随 __g.marker.setAttachCustomObject({ markerId: 'car_mark_1', objectId: 'car_move_1', offset: [0, 0, 0] }) __g.marker.setAttachCustomObject({ markerId: 'car_mark_2', objectId: 'car_move_2', offset: [0, 0, 0] })点击车辆旋转相机
在Event.ts判断点击物体
const OnEvent = async (e: { eventtype: string; PropertyName?: string; UserData?: string; ObjectID?: string; Id?: string; GroupID?: string; MouseClickPoint?: number[]; Type?: string }) => { console.log('鼠标左键单击', e) // 判断是否为左键点击的交互 if (e.eventtype === 'LeftMouseButtonClick') { if (e.Type == 'marker' && e.Id == 'car_mark_3') { __g.camera.set(-601.601094, 361.158125, -60.57855, 0.393528, -118.390999, 1) } }}开始主动驾驶模块
/** * 无人驾驶 */export const unmanned = async () => { setTheTime() clean() await addCar([-813.645264, 724.513428, -61.49287], 'car_move_1', [0, -28, 0]) addMark('car_mark_1', [-882.71228, 774.266724, 0]) await addCar([-665.85467529296875, 480.9832763671875, -64.897811889648438], 'car_move_2', [0, -28, 0]) addMark('car_mark_2', [-665.85467529296875, 480.9832763671875, 0]) // 设置标签追随 __g.marker.setAttachCustomObject({ markerId: 'car_mark_1', objectId: 'car_move_1', offset: [0, 0, 0] }) __g.marker.setAttachCustomObject({ markerId: 'car_mark_2', objectId: 'car_move_2', offset: [0, 0, 0] }) addMove(0, 'car_move_1') addMove(1, 'car_move_2') // 增加静止车辆 await addCar([-609.2427978515625, 376.18206787109375, -61.138870239257813], 'car_move_3', [0, 0, 0]) addMark('car_mark_3', [-823.35150146484375, 666.82122802734375, 0], '矿车-闲暇') __g.marker.setAttachCustomObject({ markerId: 'car_mark_3', objectId: 'car_move_3', offset: [0, 0, 0] })最初 来到页面革除所有操作（很重要！！！）*
const clean = () => { __g.customObject.clear()}具体视频成果，能够查看