ThingJS官方示例教程（三）

上一節我們學習了在ThingJS使用app.level.change(ev.campus);這個來注冊進出層級事件，該事件可以實現樓層的進出，有自定義屬性或是ID屬性物體的雙擊聚焦功能，本節則是詳細講解一下ThingJS中關於層級切換的一些注冊事件以及如何去控制層級切換！

ThingJS層級切換啟用與暫停

在ThingJS中，注冊進出層級事件是很簡單的，如下方代碼所示，但是我們又該如何在層級發生變化的時候去添加對應的邏輯代碼呢？其實也不難，使用ThingJS中的層級監聽事件THING.EventType.EnterLevel以及THING.EventType.LeaveLevel即可在進出層級的時候去寫我們的控制代碼了！

app.on('load', function (ev) {
    // 場景加載完成后 進入園區層級
    app.level.change(ev.campus);
});

完整的進出層級監聽事件如下：

/**
 * 說明：以建築（Building）層級為例，說明進出層級事件 及其 方向性
 * 操作：
 * 左鍵雙擊建築 進入建築層級；此時觸發了進入建築事件
 * 進入建築后再左鍵雙擊 進入樓層；此時觸發了退出建築事件
 * 進入樓層后右鍵單擊 返回建築；此時觸發了進入建築事件
 * 返回建築后 右鍵單擊 返回園區；此時觸發了退出建築事件
 * 教程：ThingJS教程——>園區與層級——>【進階】場景層級事件
 * 難度：★★★☆☆
 */
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'     // 場景地址
});

app.on('load', function (ev) {
    // 場景加載完成后 進入園區層級
    app.level.change(ev.campus);
});

// 監聽建築層級的 EnterLevel 事件
app.on(THING.EventType.EnterLevel, ".Building", function (ev) {
    // 當前進入的層級對象
    var current = ev.current;
    // 上一層級對象
    var preObject = ev.previous;

    // 如果當前層級對象的父親是上一層級對象（即正向進入）
    if (current.parent === preObject) {
        console.log("從 " + preObject.type + " 進入了 " + current.type);
    }
    else {
        console.log("進入 " + current.type + "（從 " + preObject.type + " 退出）");
    }
});

// 監聽建築層級的 LeaveLevel 事件
app.on(THING.EventType.LeaveLevel, ".Building", function (ev) {
    // 要進入的層級對象
    var current = ev.current;
    // 上一層級對象（退出的層級）
    var preObject = ev.previous;

    if (current.parent === preObject) {
        console.log("退出 " + preObject.type + " 進入 " + current.type);
    }
    else {
        console.log("退出 " + preObject.type + " ，返回 " + current.type);
    }
})

這個只是一個基礎版本的進出層級監控輸出，如果是需要在進出層級的時候添加事件，則需要在我們的EnterLevel事件、LeaveLevel 事件中添加對應的功能事件代碼，比如后續的添加物體2D頂牌或者3D Marker標記，我們也會在后續進行講解。

同樣，針對進出園區層級控制，我們也有重新注冊園區事件以及暫停園區事件的功能，相關代碼如下：

/**
 * 說明：以建築（Building）層級為例，說明進出層級事件 及其 方向性
 * 操作：
 * 左鍵雙擊建築 進入建築層級；此時觸發了進入建築事件
 * 進入建築后再左鍵雙擊 進入樓層；此時觸發了退出建築事件
 * 進入樓層后右鍵單擊 返回建築；此時觸發了進入建築事件
 * 返回建築后 右鍵單擊 返回園區；此時觸發了退出建築事件
 * 教程：ThingJS教程——>園區與層級——>【進階】場景層級事件
 * 難度：★★★☆☆
 */
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'     // 場景地址
});

app.on('load', function (ev) {
    new THING.widget.Button('開', queryByOpen);
    new THING.widget.Button('關', queryByClose);
    // 場景加載完成后 進入園區層級
    app.level.change(ev.campus);

});

function queryByOpen() {
    // 開啟系統內置的左鍵雙擊進入下一層級操作
    app.resumeEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
    // 開啟系統內置的右鍵單擊返回上一層級操作
    app.resumeEvent(THING.EventType.Click, null, THING.EventTag.LevelBackOperation);
    // 開啟進入物體層級默認操作行為
    app.resumeEvent(THING.EventType.LeaveLevel, '.Thing', THING.EventTag.LevelSceneOperations);
    // 開啟退出物體層級默認操作行為
    app.resumeEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSceneOperations);
}

function queryByClose() {
    // 暫停系統內置的左鍵雙擊進入下一層級操作
    app.pauseEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
    // 暫停系統內置的右鍵單擊返回上一層級操作
    app.pauseEvent(THING.EventType.Click, null, THING.EventTag.LevelBackOperation);
    // 暫停進入物體層級默認操作行為
    app.pauseEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSceneOperations);
    // 暫停退出物體層級默認操作行為
    app.pauseEvent(THING.EventType.LeaveLevel, '.Thing', THING.EventTag.LevelSceneOperations);
}