先看效果圖

實現步驟

獲取點

在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() // 獲取礦車id mainCarId = res.infotree.filter((item: any) => item.name === '礦車')[0].iD // 獲取圖層 const objRes = await __g.tileLayer.getObjectIDs(mainCarId) // 獲取圖層內對象id objId = objRes.data[0].objectIds[0]

隱藏多余圖層

let infoArr, hideArr const 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是投影坐標系，也可以設置為經緯度空間坐標系值為1range: [1, 100000], //可視范圍fixedSize: true, //圖片固定尺寸，取值范圍：false 自適應，近大遠小，true 固定尺寸，默認值：falsetext, //顯示的文字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() }

具體視頻效果，可以查看

總結

以上是生活随笔為你收集整理的智慧矿山无人驾驶模块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。