统一开发 API

Appearance

切换场景 ​

此功能案例实现后台预加载地图场景，场景加载成功后，切换场景功能

目录 ​

1. 功能点 ​

  • 添加地标图 addLandmarkLayer
  • 监听地标图层点击事件 pickOverlay onLandmarkLayerClick
  • 后台加载场景 loadService
  • 监听后台场景加载成功 onServiceLoad
  • 监听切换场景事件 onServiceSwitch

返回本章目录

2. 视频演示 ​

返回本章目录

3. 核心代码 ​

引入版本：3.0 起支持

第一步 ​

添加地标图层，开启地标图点击事件，开启后台加载地图

JavaScript
// 添加散点
function addPoints() {
    let jsonData = {
        id: 'landmarkLayerId',     // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
        name: 'layerName',         // 图层名称，支持为图层自定义名称
        coordType: 0,              // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
        coordTypeZ: 0,             // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
        autoScale: false,          // 如果开启后，图标会按照摄像机远近自动缩放大小
        legends: [                 // 定义图层包含图例，支持为不同图例定义各自样式
            {
                name: 'legendName1',
                color: '#ff0000',
                iconName: 'camera'
            }
        ],
        data: points // 定义图层可视化数据
    };
    window.appInstance.uniCall('addLandmarkLayer', jsonData, (res) => {
        window.appInstance.uniCall('pickOverlay', {
            overlayType: 'landmarkLayer', // 图层对象类别，详见下表：可选中图层对象类别
            idLayer: 'landmarkLayerId',   // 如果具体想限定图层对象，则填写图层对象 id，如不限制，可不填
            type: 'click',                // 单选模式，click：点击选中；hover：悬停选中
            isShowDecorator: false        // 表示是否显示选中的高亮装饰符，true：显示，false：不显示，默认：true
        }, res => {
            console.log('开启地标点选中', res);
        });
    });
}

第二步 ​

后台加载地图服务

JavaScript
// 预读场景
function loadService() {
    loading.className = 'loading'
    axios
        .post(
        'https://www.tuguan.net/api/user/v1/visitorScene/4ea662d5-befc-41d0-9d1f-fed0f2ebc4c4'
    )
        .then((res) => {
        console.log(res);
        // 加载地图
        window.appInstance.uniCall(
            'loadService',
            {
                name: "factory",                 // 服务名称，用于切换服务时使用
                container: document.getElementById('container'),
                mode: 'scene',                  // scene代表端渲染 streaming代表流渲染
                url:                            // 服务地址
                'https://www.tuguan.net/api/sceneEditor/v1/scenes/4ea662d5-befc-41d0-9d1f-fed0f2ebc4c4/loadAVWS', //模型地址
                token: res.data.accessToken,    // token，如果服务地址需要token验证，在此填入
                resolution: [1920,1080],	    // 控件 像素分辨率，宽，高
                editMode: false	                // 是否开启编辑模式，默认不开启，编辑模式的鼠标交互和非编辑模式的不同
            },
            (res) => {
                console.log(res);
            }
        );
    })
}

第三步 ​

监听地图加载成功事件

JavaScript
// 监听场景加载成功
window.appInstance.uniCall('addEventListener', {
    eventName: 'onServiceLoad',
    callback: (res) => {
        console.log('预加载场景', res)
        isInit = true
    },
})

第四步 ​

添加点击地标图事件订阅，并且在事件接收函数里判断，如果子场景预加载完成了，则切换服务

JavaScript
// 注册地标图点击事件
window.appInstance.uniCall('addEventListener', {
    eventName: 'onLandmarkLayerClick',
    callback: (res) => {
        console.log(res);
        if (isInit) {
            switchService();
        }
    }
});

// 切换场景
function switchServer() {
    window.appInstance.uniCall(
        'switchService',
        { name: 'factory' },
        (res) => {
            console.log('切换场景', res)
        }
    )
}

第五步 ​

订阅 onServiceSwitch 事件，用于跟踪场景服务是否切换成功，做其他事情

JavaScript
// 场景切换成功事件
window.appInstance.uniCall('addEventListener', {
    eventName: 'onServiceSwitch',
    callback: (res) => {
        // dosomething()
    },
})

返回本章目录

4. 代码下载 ​

点击跳转到下载页面

返回本章目录