ThingJS：3D地圖輕量制作方法普及

作為戶外廣告界的“兵家必争之地”，時報廣場出現過許多有趣的廣告牌。一些大螢幕，已經和我們的生活産生了奇妙的聯系。ThingJS支援3D地圖輕量制作，城市是每個人的家，現在就教你如何制作3D地圖！

智慧城市指的是運用資訊和通信技術手段，實作精細化和動态管理，并提升城市管理成效和改善市民生活品質。城市大屏應用通過可視化的形式營造感覺氛圍，把資料背後的故事生動描繪，調動閱聽人的情緒與感覺，傳達本地文化背後的商業價值。

ThingJS支援通過編輯界面可視化的點選方式來快速使用搭建地圖工具，在智慧城市管理平台建設過程中，基于可視化實作集中指揮排程、預案及輔助決策以及服務，使得資料共享交換更加便捷。更多詳情參閱Citybuilder技術文檔 >

登入您的ThingJS平台賬号，進入線上編輯界面，在操作可視化服務下點選進入Citybuidler。

第 1 步：建立地圖項目

點選+号，建立地圖項目，可選擇一鍵生成或者自己上傳Geojason資料。

第 2 步：選擇底圖

進入Citybuilder界面（自己上傳資料），從【底圖】清單中選取最貼近使用場景的【背景底圖】模闆，預設為Google影像。

第 3 步：添加圖層

上傳準備好的Geojason資料，底圖上新增一個地理圖層。可繼續利用【底圖】元件來增強效果。

第 4 步：放置場景

進入【場景】，可從資料庫中直接選擇園區或建築，選擇地點，嵌入場景。之後進行【項目定位】，包括視角調整和互動參數配置。

第 5 步：預覽釋出

點選畫布右下角全屏預覽，預覽完畢後點選釋出，即可生成 URL，并可設定通路密碼

如上圖所示，生成的地圖場景可轉入ThingJS平台進行二次開發，純js代碼引用地圖元件腳本，擷取CityBuilder轉出的url，定義類型為map，随後從map中擷取項目的瓦片圖層、業務圖層，後續可進行綁定回調控制，并根據名稱查詢圖層對象，編輯修改尺寸或大小參數。

官方示例如下：

var app = new THING.App();
app.background = [0, 0, 0];

// 引用地圖元件腳本
THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
    app.create({
        type: 'Map',
        // CityBuilder轉出的url
        url: 'https://www.thingjs.com/citybuilder_console/mapProject/config/TVRFNE9UZz1DaXR5QnVpbGRlckAyMDE5',
        complete: function (event) {
            // 在這裡編寫業務代碼
            var map = event.object;
            // 擷取項目中的瓦片圖層
            var baseLayers = map.baseLayers;
            // 擷取項目中的業務圖層
            var userLayers = map.userLayers;
            var buildingLayer = app.query('building')[0];
            buildingLayer.on(THING.EventType.DBLClick, function (e) {
                let obj = e.object;
                app.camera.earthFlyTo({
                    object: obj
                });
            });

            var toolbarWidth = 250;
            var toolbar = new THING.widget.Panel({
                hasTitle: true, // 是否有标題
                titleText: '圖層清單',
                width: toolbarWidth
            });
            let clientWidth = app.domElement.clientWidth;
            toolbar.position = [clientWidth - toolbarWidth - 10, 10];
            userLayers.forEach(function (layer) {
                var button = toolbar.addBoolean({ open: true }, 'open').caption(layer.name);// 綁定回調
                button.on('change', function (ev) {
                    layer.visible = ev;
                });
            });

            // 先根據名稱查詢圖層對象 名稱是在CityBuilder中配置的圖層的名稱
            var primaryRoadLayer = app.query('primary')[0];
            var originWidth = primaryRoadLayer.renderer.width;
            new THING.widget.Button('修改線寬度', function () {
                if (primaryRoadLayer.renderer.width === originWidth) {
                    primaryRoadLayer.renderer.width = 8;
                }
                else {
                    primaryRoadLayer.renderer.width = originWidth;
                }
            });
            // 根據名稱查詢圖層對象
            var bankLayer = app.query('bank')[0];
            var originSize = bankLayer.renderer.size;
            new THING.widget.Button('修改點尺寸', function () {
                if (bankLayer.renderer.size === originSize) {
                    // 修改整個圖層對象的尺寸
                    bankLayer.renderer.size = 30;
                }
                else {
                    bankLayer.renderer.size = originSize;
                }
            });
            // 根據名稱查詢圖層對象
            var buildingLayer = app.query('building')[0];
            var originHeight = buildingLayer.objects[0].height;
            new THING.widget.Button('修改建築高度', function () {
                // 修改第一個對象的高度
                if (buildingLayer.objects[0].height === originHeight) {
                    buildingLayer.objects[0].height = 500;
                }
                else {
                    buildingLayer.objects[0].height = originHeight;
                }
            });
        }
    });
});
           

ThingJS，讓開發者早點傳遞項目早點下班回家！