统一开发 API

Appearance

点标绘 ​

此功能案例实现点击场景标绘地标点，点击地标点修改地标点位置

目录 ​

1. 功能点 ​

  • 场景点击事件 onSceneClick
  • 添加地标图 addLandmark
  • 监听地标图层点击事件 pickOverlay onLandmarkLayerClick
  • 显示/隐藏位移交互轴 showAxis
  • 更新地标点 updateLandmarkCoord

返回本章目录

2. 视频演示 ​

返回本章目录

3. 核心代码 ​

引入版本：3.1 起支持

第一步 ​

订阅场景点击事件

JavaScript
// 注册地图点击事件
window.appInstance.uniCall('addEventListener', {
    eventName: 'onSceneClick',
    callback: (res) => {
        if (isMark == 1) {
            let data = res.data[0]
            addLandmark(data.coord, data.coordZ)
        }
    }
})

第二步 ​

添加地标点，开启地标图点击事件

JavaScript
// 添加散点
function addLandmark(coord, coordZ) {
    let jsonData = {
        id: 'layerId',       // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
        coordType: 0,        // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
        coordTypeZ: 0,       // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
        iconName: 'site_03', // 内置图标名称，详见下表：内置图标；或根据项目，在场景中预置好的图标对象的名称，包含文字样式定义
        label: '',           // 图标标签文本
        coord: coord,        // XY 轴坐标，X：经度；Y：纬度
        coordZ: coordZ       // Z 轴高度（单位：米）
    }
    window.appInstance.uniCall('addLandmark', jsonData, (res) => {
        window.appInstance.uniCall('pickOverlay', {
            overlayType: 'landmark',
            idLayer: 'layerId',
            type: 'click',
            isShowDecorator: false
        })
    })
}

第三步 ​

订阅地标点点击事件

JavaScript
// 注册地标点击事件
window.appInstance.uniCall('onLandmarkClick', {}, (res) => {
    console.log('点标点点击', res)
    showAxis()
})

第四步 ​

显示地标点交互轴，用于拖拽地图

JavaScript
// 显示交互轴
function showAxis() {
    window.appInstance.uniCall('showObjectAxis', {
        overlayType: 'landmark', 
        idLayer: 'layerId',
        id: 'layerId',
        axisType: 'transform',   // 显示交互轴的类型，none：不显示，scale：缩放轴，transform：平移轴，rotation：旋转轴
        unit: 1                  // 交互轴交互时的最小单位，如果是平移，单位是米，如果是缩放，单位是倍率，如果是旋转，单位是度
    })
}

第五步 ​

注册坐标轴移动事件

JavaScript
window.appInstance.uniCall('onTransformAxisDrag', {}, (res) => {
    console.log('移动', res)
    points.coord = res.data[0].coord
    points.coordZ = res.data[0].coordZ
})

第六步 ​

更新地标数据，隐藏交互轴

JavaScript
function hideAxis() {
    window.appInstance.uniCall('showObjectAxis', {
        overlayType: 'landmark', 
        idLayer: 'layerId',
        id: 'layerId',
        axisType: 'none',       // 显示交互轴的类型，none：不显示，scale：缩放轴，transform：平移轴，rotation：旋转轴
        unit: 1                 // 交互轴交互时的最小单位，如果是平移，单位是米，如果是缩放，单位是倍率，如果是旋转，单位是度
    })
}
function updataLandmark() {
    hideAxis()
    window.appInstance.uniCall('updateLandmarkCoord', {
        id: 'layerId',         // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
        coordType: 0,          // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
        coordTypeZ: 0,         // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
        tag: 'custominfo',     // 用户自定标签，用户保存用户的扩展数据
        coord: points.coord,   // XY 轴坐标，X：经度；Y：纬度
        coordZ: points.coordZ  // Z 轴高度（单位：米）
    })
}

返回本章目录

4. 代码下载 ​

点击跳转到下载页面

返回本章目录