三维可视化场景常用方法 常用三维场景方法集合

指定三维场景ID

// 根据ID打开三维场景文件
map.openMapById(esmapID)

根据ID打开室内建筑

map.openBuildingById(buildingID)

根据场景组件类型新建图层

// 根据建筑ID获取建筑对象
var building = map.getBuildingById(esmapID);
// 获取该建筑对象的第一层楼层对象
var floor = building.getFloor(1);

// 方法1，共用一个模型图层layer，需要添加到楼层对象
var layer = new esmap.ESLayer(esmap.ESLayerType.MODEL3D);
floor.addLayer(layer);

// 方法2，通过名字的区别获取或创建不同的模型图层layer，无需添加到楼层对象
var layer = floor.getOrCreateLayerByName('camera' , esmap.ESLayerType.MODEL3D);

更多场景组件类型，请查看基础数据获取

移动三维场景位置

map.moveTo({
    x: map.center.x+10,         // 目标点x在中心点坐标基础上再加10米
    y: map.center.y+10          // 目标点y在中心点坐标基础上再加10米
    // callback: func,          // 可选，完成移动后的回调函数
    // time: 3,             // 可选，单位（秒/s），若time为0或不传值会瞬间移动，没有移动过程
                            // time若有值则控制三维场景视角移动过程时间，可以实现平滑地移动三维场景

})

设置三维场景视角

map.rotateAngle = 60;          // 设置三维场景的旋转角度
        
map.tiltAngle = 20;            // 设置三维场景的倾斜角(最大81°)

map.scaleLevel                 // 获取三维场景当前的缩放层级

map.scaleLevelTo(10);          // 缩放到第10等级，共24等级，执行时有飞行动画过程

map.controls.autoRotate = true // 开启三维场景自动旋转视角

map.controls.zoomToCursor=false  //设置三维场景不以鼠标处坐标为中心进行缩放,而是以三维场景中心点坐标进行缩放

map.cameraFlyTo({              // 视角移动方法，执行时有飞行动画过程
    directionAngle: 209.16,    // 视角朝向的方向角
    pitchAngle: 62.85,         // 视角朝向的俯仰角
    radius: 10.4,              // 视角中心目标点至相机位置本身的距离
    time: 2,                   // 视角移动飞行时间，单位（秒/s）
    x: 12696270.36,              
    y: 2577177.97,             // 相机中心目标点坐标
    callback: () => {          // 飞行动画结束后的回调函数
    ...
    }
})

map.cameraFlyToHelper()        // 获取当前视角配置，返回值可用于上面的视角移动方法

修改3d模型颜色

// 单个模型
map.change3dColor({
    id:0,
    // name:,
    // fnum:[1,2]
    color:'#00ff00'
})
// 多个模型
map.change3dColor({
    id:[1,2,3],
    // name:,
    // fnum:[1,2]
    color:'#00ff00'
})
// 若需要还原颜色把color设为false

切换三维场景背景

map.on('loadComplete', function () {
    // 1.直接设置三维场景背景
    map.setBackgroundImage('./image/bg.jpg');  
    // 2.设置为纯色背景色
    map.setBackgroundImage(null);        // 有背景图片时先取消，无背景图片则不需要此代码
    map.setBackgroundColor('#FF0000');   // 修改背景颜色  
});

切换2维/3维模式

map.viewMode = esmap.ESViewMode.MODE_2D;  // 切换2维视角
map.viewMode = esmap.ESViewMode.MODE_3D;  // 切换3维视角

esmap.ESTileMap.viewMode = esmap.ESViewMode.MODE_2D    // 切换并锁定2维模式
esmap.ESTileMap.viewMode = esmap.ESViewMode.MODE_3D    // 切换并锁定3维模式

楼层聚焦

var fnum = building.getFloorNumByName('F1'); // 通过楼层名称来获取三维场景内部楼层fnum
building.focusFloorNum = fnum;               // 切换聚焦楼层方法1,如果是多楼层同时显示了,其它楼层不隐藏  
building.changeFocusFloor(fnum);             // 切换聚焦楼层方法2,如果是多楼层同时显示了,其它楼层隐藏不显示  
building.visibleFloorNums = [fnum1,fnum2];   // 切换可见楼层

修改模型颜色(一定要在三维场景加载完成事件之后才有效)

// 改变方块房子颜色,id,name二选择一，都可以是数组, fnum可选择，参数color:'#FF0000'
map.changeModelColor({
    id:[1,2],
    name:'abc',
    fnum:[1],
    color:'#FF0000'
}) 
    
// 改3d模型颜色,id,name二选择一，都可以是数组, fnum可选择，参数color:'#FF0000'
map.change3dColor({
    id:[1,2],
    name:['abc','abc'],
    fnum:[1],
    color:'#FF0000'
})
    
// 若需要还原颜色则将color:0

切换主题

// 输入主题文件名
map.themeName = '1004'

界面截图

map.screenshot({
    download:true,  // 是否自动下载图片
    filename: 'screenshot.png',   // 下载图片名
    newTab:false,   // 是否自动打开新标签页
    width:1024,     // 截图宽度
    height:768,     // 截图高度
})

三维场景手势控制

// 默认都为true

map.gestureController.enableMapPan       // 支持移动三维场景

map.gestureController.enableMapRotate    // 支持旋转三维场景

map.gestureController.enableMapIncline   // 支持倾斜三维场景

map.gestureController.enableMapZoom      // 支持缩放三维场景

map.gestureController.enableMapSingleTap // 支持单击三维场景
    

根据id寻找房间并返回房间信息更多搜索方法查看 三维场景数据信息检索 页面

// 根据id寻找房间，并返回房间信息
var queryFloors = [1,2,3]   // 查询多个楼层
var queryParams = {
    nodeType: esmap.ESNodeType.MODEL, // nodeType指定为房间模型
    id: '1'                   // 关键词查询，根据关键字模糊查询结果
};
esmap.ESMapUtil.search(map, queryFloors, queryParams, function (data) {
    // 回调函数输出的data为查询结果
   console.log(data)   
});

marker动画三维场景标注绘制marker详细用法请参考 绘制三维场景标注 页面

var mark = new esmap.ESTextMarker({
name: '文字标注',
// ...
});

// 1.选中后不停的蹦
mark.jump({
    times: 100,      // 蹦100次
    duration: 1,     // 间隔1秒
    delay: 0.5,      // 0.5秒后执行
    height: 10       // 蹦的三维场景高度
});
// 2.停止选中后的蹦
mark.stopJump();
// 3.让选中的闪一下
mark.flash();    
// 4.更换选中后的图片
mark.url=新图片url; 

三维场景手势操作

// 控制不能缩放三维场景/禁止缩放三维场景
map.gestureController.enableMapZoom  =  false;

// 设置不能旋转/禁止旋转三维场景
map.gestureController.enableMapRotate = false;

// 设置不能移动/禁止移动三维场景
map.gestureController.enableMapPan = false;

// 设置不能单击/禁止点击三维场景
map.gestureController.enableMapSingleTap = false;

// 设置不能倾斜/禁止倾斜三维场景
map.gestureController.enableMapIncline = false;

// 禁止 WASD 键会控制三维场景移动
map.controls.enableKeys = false;

// 开启上下滑动切换楼层的方法,但会取消了左右平移事件,可以监听楼层切换的事件来进行后续操作
map.gestureController.enableFloorChange = true;
map.on('focusFloorNumChanged', function (e) {
// 监听楼层切换的事件来进行后续操作
        });

三维场景对象显示隐藏接口

map.change3dVisible({
    id: [54, 235,],   // 三维场景对象id
    value: false,     // true显示,false隐藏
})

根据经纬度计算两点之间的距离

// 参数为ESMap三维场景坐标
let dis = esmap.ESMapUtil.getDistance({x: 12683490.6, y: 2557878.79}, {x: 12683459.98, y: 2557874.12});

百度地图坐标转换为ESMap三维场景坐标

let coord = esmap.ESMapUtil.transformBD09ToMap([116.397428, 39.90923]);

高德地图坐标转换为ESMap三维场景坐标

let coord = esmap.ESMapUtil.transformGCJ02ToMap([116.397428, 39.90923]);

ESMap三维场景坐标转换为WGS84坐标

let lonlat = esmap.ESMapUtil.transformMapToWGS84({x: 12683490.6, y: 2557878.79});

WGS84坐标转换为ESMap三维场景坐标

let coord = esmap.ESMapUtil.transformWGS84ToMap([116.397428, 39.90923]);