ThingJS，5步快速開發3D地圖，縮短項目交付時間！

3D地圖賦予城市大屏生命力，使得數據顯示變得生動化，造成了完整的數據三維可視化管理。ThingJS提供3D地圖組件，經過項目參數設置生成URL，快速開發可視化商業項目。

智慧城市指的是運用信息和通訊技術手段，實現精細化和動態管理，並提高城市管理成效和改善市民生活質量。城市大屏應用經過可視化的形式營造感知氛圍，把數據背後的故事生動描繪，調動受衆的情緒與感知，傳達本地文化背後的商業價值。

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，快速開發3D地圖，縮短項目交付時間！