多ID切换场景方案-室内园区城市三维可视化引擎室内导航及制作|易景空间三维可视化云平台ESMap

多个三维场景ID互相切换的项目实例

这里演示两种切换场景ID的方式，根据业务场景选择您所需要的切换方法。

室内模式：调用openMapById切换地图

// 第一步：准备必要的变量定义
const innerMapIDList = ['10005', 'test666']       // 存储需要切换的id数组
const curSelectedID = { value: '10005',index: 0 } // 当前场景id
const isAllowSwitchSign = { value: true }         // 判定是否允许切换场景，可用于按钮状态

// 第二步：设定由按钮触发，点击切换下一个场景
function switchMapBtn () {
    if (isAllowSwitchSign.value) {
        innerMapIDList.some((bid,index) => {
            if (bid !== map.id) {

                // 该业务场景仅供参考，与当前场景ID不同时切换该场景
                curSelectedID.value = bid
                curSelectedID.index = index

                // *********** 关键API：执行切换场景 ***********
                map.openMapById(bid)
                return true
            }
        })

        // 第三步：监听一次场景加载进度是否完成，避免频繁切换操作
        isAllowSwitchSign.value = false         // 切换按钮不可点击
        map.once('progressComplete', () => {    // 监听完成一次便会销毁该事件
            // 监听到场景完全加载完毕，恢复按钮可点击
            isAllowSwitchSign.value = true
        })
    }
}

城市模式：调用openBuildingById切换室内地图

// 第一步：准备必要的变量定义
const innerMapIDList = ['10005', 'test666']       // 存储需要切换的id数组
const curSelectedID = { value: '10005',index: 0 } // 当前场景id
const isAllowSwitchSign = { value: true }         // 判定是否允许切换场景，可用于按钮状态

// 第二步：设定由按钮触发，点击切换下一个场景
function switchMapBtn () {
    if (isAllowSwitchSign.value) {
        innerMapIDList.some((bid,index) => {
            if (bid !== curSelectedID.value) {

                // 该业务场景仅供参考，与当前场景ID不同时切换该场景
                curSelectedID.value = bid
                curSelectedID.index = index

                // *********** 关键API：城市模式下，执行切换室内场景 ***********
                map.openBuildingById(bid)
                return true
            }
        })

        // 第三步：监听一次场景加载进度是否完成，避免频繁切换操作
        isAllowSwitchSign.value = false         // 切换按钮不可点击
        map.once('progressComplete', () => {    // 监听完成一次便会销毁该事件
            // 监听到场景完全加载完毕，恢复按钮可点击
            isAllowSwitchSign.value = true
        })
    }
}

以vue为例：配置多入口和html文件

以vue-cli脚手架为例的vue.config.js配置，并准备好对应文件：

创建iframe部分的template代码

// 用于装载多个室内图(可能多个，尽量单个iframe) 
<div id="map-frames-container" v-show="isShowInnerMap"></div>

let isLoadedInnerMap = false    // 判断创建过内嵌地图场景，创建后缓存iframe便于显隐
let isShowInnerMap = false      // 是否正在展示iframe内嵌地图场景

// 开启iframe窗口展示内嵌三维场景
showInnerMap({ id: '10005', isShow: true })
// 隐藏iframe窗口展示内嵌三维场景
showInnerMap({ id: '10005', isShow: false })

// 判断展示单个内嵌地图
function showInnerMap ({ id, isShow }) {
    const mapId = id
    isShowInnerMap = isShow

    // 从未创建过内嵌地图场景，需要创建iframe
    if (!isLoadedInnerMap) {

        // createFrame方法是创建iframe内嵌新的地图场景，具体代码在下方查看
        createFrame(mapId, './inner.html', (frameWindow) => {
            isLoadedInnerMap = true

            // 存储内嵌场景的地图对象，esmap实例存储在frameWindow.mapApp.map
            mapApp.frameWindows.innerMap = frameWindow.mapApp
            
            // 判断显隐元素的css样式
            document.getElementById('map-frame-' + mapId).style.display = isShow ? 'block' : 'none'

            // 触发内嵌场景的场景初始化方法,主要是执行new esmap.ESMap({...})创建场景
            frameWindow.mapApp.initMap()
            frameWindow.mapApp.mapId = mapId

            frameWindow.mapApp.map.on('loadComplete', () => {
                // 内嵌场景加载完成事件
            })
        })
    } else {
        // 加载过模型地图，则只需要显隐iframe窗口即可
        document.getElementById('map-frame-' + mapId).style.display = isShow ? 'block' : 'none'
    }

        // 判断是否曾创建过内嵌地图场景
    if (isShow && isLoadedInnerMap) {
        
        mapApp.map.stopRender()                     // 停止原本地图场景的渲染
        mapApp.floorControl.visible = false         // 隐藏原本地图场景的控件
        mapApp.frameWindows.innerMap.map.reRender() // 开启内嵌新地图场景的渲染

    } else if (!isShow && isLoadedInnerMap) {

        // 若隐藏内嵌场景且创建过内嵌场景，则恢复原本地图场景的控件和渲染

        mapApp.floorControl.visible = true              // 恢复原本地图的控件
        mapApp.map.reRender()                           // 恢复原地图场景的渲染
        mapApp.frameWindows.innerMap.map.stopRender()   // 停止内嵌新地图场景的渲染
    }
} 
                                                
// 创建iframe窗口的函数
function createFrame (mapId, pagePath, onLoadCallback) {
    let frameContainer = document.getElementById('map-frames-container')
    let iframeDom = document.createElement('iframe')
    iframeDom.setAttribute('class', 'map_frame animate__animated') 
    iframeDom.setAttribute('id', 'map-frame-' + mapId)
    iframeDom.setAttribute('src', pagePath)     // 跳转第二个页面
    iframeDom.style.display = 'none'
    iframeDom.style.border = 'none'
    frameContainer.appendChild(iframeDom)
    iframeDom.onload = function () {
        console.log('on iframe loaded')
        onLoadCallback && onLoadCallback(iframeDom.contentWindow)
    }
}

"调用API切换场景"-注意事项：

1.该方案支持室内模式下多次切换地图场景；

2.如果是城市模式使用，室外城市地图仅加载一次，但可以多次切换室内场景;

3.该方案改动代码相对简单，可有效减少切换地图带来的内存负担。

// *********** 关键API：执行切换场景 ***********
map.openMapById(bid)       // 室内模式：根据id切换场景

map.openBuildingById(bid)  // 城市模式：只切换室内地图场景

"创建iframe切换场景"-注意事项：

1.创建iframe窗口覆盖当前视窗，该方案支持任意模式下切换场景；

2.改动代码相对复杂，但切换速度优势和业务区分更明显；

3.原理是通过iframe创建新场景页面掩盖住原场景，同样支持实现多场景同时展示。

// *********** 关键API：停止原地图场景渲染 ***********
map.stopRender()    // 停止原场景的渲染有效减少性能损耗

map.reRender()      // 在切换回原场景时调用恢复渲染

其他注意事项：

点击错位，动态调整三维场景容器大小

// 可能会遇到容器宽度或者高度发生变化导致渲染错位
map.mapView.updateSize()    // 容器宽高更改后调用

若出现白屏的情况，请给容器设置宽高

#map-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
}