ThingJS官方示例（九）：經過CityBuilder轉出的url開發3D地圖腳本

時間 2021-01-19

標籤 javascript 前端 java app dom ide 工具 url 設計欄目 HTTP/TCP 简体版

原文原文鏈接

#前端開發##3D可視化##物聯網#javascript

明確虛擬場景的位置
Citybuilder導出二次開發
基礎參數配置與修改

CityBuilder（城市級場景搭建工具）使用起來足夠簡單，很是符合設計人員的使用習慣，那麼，辛辛苦苦作好的城市級場景，如何交付給開發，在後續的環節中靈活使用？前端

ThingJS平臺早就考慮到了這個問題，統一了平臺數據，支持CityBuilder轉出url；平臺加載地圖組件以後，便可輕鬆二次開發。下面咱們就來解析使用步驟，有任何問題請留言。java

明確虛擬場景的位置

三維地球立足於世界座標系，城市級或園區級場景會選中實際地點進行加載，這裏須要開發人員修改app.background的三點座標，提供精準的地圖定位。app

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

Citybuilder導出二次開發

動態加載地圖組件腳本以後，能夠經過Citybuilder轉出的url建立地圖後進行二次開發，包括添加業務圖層、後臺修改對象參數，示例的說明簡單易懂，讓開發人員更加清楚瞭解功能的價值。更多demo查看進入官網註冊喲！

注意結合CityBuilder地圖工具來使用更方便，設計人員能夠利用可視化組件進行圖層樣式設置，支持導入3D建築場景，以後生成項目url導入ThingJS（物聯網3D可視化PaaS平臺 - 數字孿生可視化平臺），以下圖所示。
dom

// 引用地圖組件腳本
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;
                });
            });

基礎參數配置與修改

3D場景內的圖層對象通常在citybuilder提早配置，基礎參數包括名稱、長寬高、顏色等參數，導入thingjs平臺後，直接使用前端代碼進行修改，常見用於線寬度、點尺寸和建築高度。ide

citybuilder配置參數

城市級場景搭建工具
工具

ThingJS修改參數代碼

更多demo查看ui

// 先根據名稱查詢圖層對象 名稱是在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;
                }
            });

ThingJS使用url開發地球場景，結合CityBuilder更加輕鬆，不管是設計師仍是開發，都可以更好地合做，完成3D項目發佈！url

關於ThingJS

ThingJS平臺提供物聯網3D可視化組件，讓3D開發更輕鬆！直接Javascript調用3D腳本，基於200個3D開發源碼示例，讓你全面瞭解物聯網可視化開發邏輯。場景搭建-3D腳本開發-數據對接-項目部署的一站式服務讓開發更高效，同20萬個開發者一塊兒成爲數字孿生技術創新者！魔豆花花活動ing，歡迎點擊進入官網>>
設計