低代码中，地图场景和园区场景相互切换（互相独立存在）

功能：在地图场景下，点击按钮，销毁地图场景并切换到园区场景；在园区场景下，点击另一个按钮销毁园区场景并切换回地图场景。



1.准备工作
通过创建App对象，对3D场景进行初始化，创建地图场景，创建两个按钮切换按钮

1. var app = new THING.App()
   
2. app.background = [0, 0, 0]
   
3. var map  //地图场景
   
4. var campus  // 园区场景
   
5. 
   
6. THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/history/uearth.min.v1.7.20.js'], function () {
   
7.     // 新建一个地图
   
8.     map = app.create({
   
9.         type: 'Map',
   
10.         style: {
    
11.             night: false
    
12.         },
    
13.         attribution: '高德'
    
14.     });
    
15.     // 新建一个瓦片图层
    
16.     var tileLayer = app.create({
    
17.         type: 'TileLayer',
    
18.         name: 'tileLayer1',
    
19.         url: 'https://webst0{1,2,3,4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    
20.         maximumLevel: 16,
    
21.     });
    
22. 
    
23.     // 将瓦片图层添加到map中
    
24.     map.addLayer(tileLayer);
    
25. 
    
26.     new THING.widget.Button('切换园区', changeToCam)
    
27.     new THING.widget.Button('切换城市', changeToMap)
    
28. })

复制代码

2.由地图场景切换到园区场景

1. function changeToCam(){
   
2.    // 销毁地图
   
3.         map.destroy()
   
4.         // 加载场景代码
   
5.         app = new THING.App({
   
6.             url: 'https://www.thingjs.com/static/models/factory',  // 场景地址
   
7.             background: '#000000',
   
8.             env: 'Seaside',
   
9.         });
   
10.         campus = app.query(".Campus")[0]
    
11.         app.level.change(app.query(".Campus")[0])
    
12.         //设置/获取摄像机 UP 方向，默认值为 [0,1,0]
    
13.         app.camera.up = [0, 1, 0]
    
14.         //观察某物体
    
15.         app.camera.fit(campus);
    
16. }

复制代码

3.由园区场景切换到地图场景

1. function changeToMap(){
   
2.         // 销毁园区场景
   
3.         campus.destroy()
   
4.         app = new THING.App();
   
5.         map = app.create({
   
6.             type: 'Map',
   
7.             // 地图场景地址
   
8.             url: 'https://city.thingjs.com/ra/city/mapProject/config/TVRRNE9UYzRNZz09Q2l0eUJ1aWxkZXJAMjAxOQ==',
   
9.             complete: function (event) {
   
10.             }
    
11.         });
    
12.         //设置/获取摄像机 UP 方向，默认值为 [0,1,0]
    
13.         app.camera.up = [0, 1, 0]
    
14.         //观察某物体
    
15.         app.camera.fit(map)
    
16.     })
    
17. }

复制代码

app.camera.up文档地址：https://support.thingjs.com/book/thingjs-api10/62a8170c6634aa32be547d1e#up
app.camera.fit()文档地址：https://support.thingjs.com/book/thingjs-api10/62a8170c6634aa32be547d1e#fit(param)