动态加载地图和园区，实现从地图到园区，园区退出到地图

项目预览地址：https://www.thingjs.com/s/4214a1eb7238fe9b5396bc40

1. 
   
2. var app = new THING.App(); //创建3D场景对象
   
3. var map //定义地图场景对象
   
4. THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
   
5.     map = app.create({
   
6.         type: 'Map',
   
7.         url: 'https://city.thingjs.com/ra/file/fetch/df/file/0AD4BC0DB2868ACD7CCA47F0BA0CC11B37C20DEFA71F26D79AA43D91A05F6F8A51F70274C3E492E636B1923AB5B9A2A400BAE4DABC78169DC76FBA0D7D5573B68D07C6C209711261/map.json',
   
8.         complete: function (event) {
   
9.             // 地图场景加载完成之后，立刻创建园区
   
10.             createCampus()
    
11.             // 创建按钮
    
12.             new THING.widget.Button('进入园区', function () {
    
13.                 map.visible = false //隐藏地图场景
    
14. 
    
15.                 // 是否需要更换鼠标旋转平移功能 下面二选一
    
16.                 // app.camera.mode = 'normal';  //设置园区场景的键盘操作：鼠标左键旋转场景，右键拖动场景
    
17.                 app.camera.options = { moveKey: 'right', rotationKey: 'left' }
    
18. 
    
19.                 // 飞到对应园区视角。也可以使用flyTo 替换，主要是切换到合适视角
    
20.                 app.camera.fit(app.query('.Campus')[0])
    
21. 
    
22.             });
    
23.             new THING.widget.Button('退出到地图', function () {
    
24.                 map.visible = true //显示地图场景
    
25.                
    
26.                 // 是否需要更换鼠标旋转平移功能 下面二选一
    
27.                 // app.camera.mode = 'earth'; ////设置地图场景的键盘操作：鼠标左键拖动场景，右键右键旋转场景
    
28.                 app.camera.options = { moveKey: 'left', rotationKey: 'right' }
    
29. 
    
30.                 // 飞到对应园区视角。也可以使用flyTo 替换，主要是切换到合适视角
    
31.                 app.camera.fit(app.query('.Campus')[0])
    
32.             });
    
33. 
    
34.         }
    
35.     })
    
36. });
    
37. 
    
38. function createCampus() {
    
39.     // 园区的经纬度坐标(GCJ_02坐标系)
    
40.     var sceneLonlat = [116.36854237952045, 39.90210055701153];
    
41.     // 将园区的经纬度坐标转为三维坐标,第二个参数代表离地高度
    
42.     var position = CMAP.Util.convertLonlatToWorld(sceneLonlat, 0.5)
    
43.     // 计算园区在地球上的旋转角度，第二个参数可以调整,对园区在地球表面进行旋转
    
44.     var angles = CMAP.Util.getAnglesFromLonlat(sceneLonlat, 180);
    
45. 
    
46.     // 创建Campus
    
47.     var campus = app.create({
    
48.         type: 'Campus',
    
49.         name: '工厂',
    
50.         url: 'https://www.thingjs.com/static/models/storehouse', // 园区地址
    
51.         position: position, // 位置
    
52.         angles: angles, // 旋转
    
53.         complete: function () { // 创建成功以后执行函数
    
54.             // 启动层级控制
    
55.             app.level.change(campus);
    
56.         }
    
57.     });
    
58. }

复制代码