yamazaki1201 发表于 2024-6-21 15:06:13

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

本帖最后由 yamazaki1201 于 2024-6-21 15:21 编辑



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

var app = new THING.App(); //创建3D场景对象
var map //定义地图场景对象
THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
    map = app.create({
      type: 'Map',
      url: 'https://city.thingjs.com/ra/file/fetch/df/file/0AD4BC0DB2868ACD7CCA47F0BA0CC11B37C20DEFA71F26D79AA43D91A05F6F8A51F70274C3E492E636B1923AB5B9A2A400BAE4DABC78169DC76FBA0D7D5573B68D07C6C209711261/map.json',
      complete: function (event) {
            // 地图场景加载完成之后,立刻创建园区
            createCampus()
            // 创建按钮
            new THING.widget.Button('进入园区', function () {
                map.visible = false //隐藏地图场景

                // 是否需要更换鼠标旋转平移功能 下面二选一
                // app.camera.mode = 'normal';//设置园区场景的键盘操作:鼠标左键旋转场景,右键拖动场景
                app.camera.options = { moveKey: 'right', rotationKey: 'left' }

                // 飞到对应园区视角。也可以使用flyTo 替换,主要是切换到合适视角
                app.camera.fit(app.query('.Campus'))

            });
            new THING.widget.Button('退出到地图', function () {
                map.visible = true //显示地图场景
               
                // 是否需要更换鼠标旋转平移功能 下面二选一
                // app.camera.mode = 'earth'; ////设置地图场景的键盘操作:鼠标左键拖动场景,右键右键旋转场景
                app.camera.options = { moveKey: 'left', rotationKey: 'right' }

                // 飞到对应园区视角。也可以使用flyTo 替换,主要是切换到合适视角
                app.camera.fit(app.query('.Campus'))
            });

      }
    })
});

function createCampus() {
    // 园区的经纬度坐标(GCJ_02坐标系)
    var sceneLonlat = ;
    // 将园区的经纬度坐标转为三维坐标,第二个参数代表离地高度
    var position = CMAP.Util.convertLonlatToWorld(sceneLonlat, 0.5)
    // 计算园区在地球上的旋转角度,第二个参数可以调整,对园区在地球表面进行旋转
    var angles = CMAP.Util.getAnglesFromLonlat(sceneLonlat, 180);

    // 创建Campus
    var campus = app.create({
      type: 'Campus',
      name: '工厂',
      url: 'https://www.thingjs.com/static/models/storehouse', // 园区地址
      position: position, // 位置
      angles: angles, // 旋转
      complete: function () { // 创建成功以后执行函数
            // 启动层级控制
            app.level.change(campus);
      }
    });
}



页: [1]
查看完整版本: 动态加载地图和园区,实现从地图到园区,园区退出到地图