智慧矿山无人驾驶模块

先看效果图

实现步骤

获取点

在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()
}

具体视频效果，可以查看