共计 4670 个字符，预计需要花费 12 分钟才能阅读完成。
先看效果图
实现步骤
获取点
在
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 是投影坐标系，也能够设置为经纬度空间坐标系值为 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()
}具体视频成果，能够查看
正文完