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

回复

本帖最后由 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')[0])
});
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')[0])
});
}
})
});
function createCampus() {
// 园区的经纬度坐标(GCJ_02坐标系)
var sceneLonlat = [116.36854237952045, 39.90210055701153];
// 将园区的经纬度坐标转为三维坐标,第二个参数代表离地高度
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);
}
});
}

复制代码

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

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

相关帖子