三维模型标注(收费功能)
您可以向三维场景中添加各种高精度、有趣又炫酷的三维模型
第一步，新建一个三维标注图层（以下代码都要在三维场景加载完成后调用map.on('loadComplete'）
map.on('loadComplete',function(){
//方法1，通过名字区别创建不同的layer
// 获取室外层对象
var floorLayer = map.getBuildingById(0).getFloor(1);
var layer=floorLayer.getOrCreateLayerByName("camera" , esmap.ESLayerType.MODEL3D);
//方法2，共用一个模型图层layer
var layer = new esmap.ESLayer(esmap.ESLayerType.MODEL3D);
})
第二步，创建一个三维模型标注实例
var marker = new esmap.ES3DMarker({
x: x, //x坐标
y: y, //y坐标
id: 2018, //自定义id标识
name: "myTree", //自定义name
url: url, //模型的文件地址
size: 1, //尺寸
angle: 0, //旋转角
height: 0, //高度
showLevel: 16, //三维场景缩放等级达到多少时隐藏
spritify: false //是否跟随三维场景缩放更新大小
});
第三步，添加到楼层对象
layer.addMarker(marker); //将标注添加到图层上
//方法1不需要以下代码
//针对方法2，将共用的模型图层添加到楼层上
// 获取室外层对象
var floorLayer = map.getBuildingById(0).getFloor(1);
floor.addLayer(layer);
第四步，启动三维场景模型加载队列
//改方法用于通知三维场景加载3d模型。如果一个图层上有多个3d模型，可以在添加完毕后统一调用一次。
layer.show3D()
模型图层的显示隐藏、删除
//隐藏图层
layer.visible=false;
//楼层上根据名字删除图层
floorLayer.removeLayersByNames("name");
//楼层上根据类型删除图层
floorLayer.removeLayersByTypes(esmap.ESLayerType.MODEL3D);
三维模型标注常用方法
从三维场景中移除
marker.delete();
模型旋转
marker.rotateTo({
angle:30 //绝对值，角度
//time:0.6 //跳跃时间，一般省略
})
//如果需要在指定方向旋转，可以传入x,y,z任意一个
//marker.rotateTo({
// x:30 //绕x轴方向旋转30度
//})
模型移动到另外一个目标位置
marker.moveTo({
x:map.center.x+20,
y:map.center.y-40
})
模型闪烁
marker.flash({
scale:1.5
//time:0.6 //闪烁时间，一般省略
})
模型跳跃
//使用默认参数跳跃
marker.jump();
marker.jump({
times:3, //次数
height:8 //高度
// time:1, //跳跃时间，一般省略
//delay:0 //延迟几秒执行
})
模型渐隐
marker.fadeOut(function(){
console.log("渐隐回调")
//obj.delete(); //隐藏之后删除该模型。删除后不可恢复。
})
模型渐显
marker.fadeIn(function(){
console.log("渐显回调")
});
模型改变颜色方法一
//单个
map.change3dColor({
id:0,
// name:,
// fnum:[1,2]
color:"#00ff00"
})
//多个
map.change3dColor({
id:[1,2,3],
// name:,
// fnum:[1,2]
color:"#00ff00"
})
//若需要还原颜色#000000
模型改变颜色方法二
//改变模型为红色
marker.changeColor('#FF0000')
//还原颜色
marker.restoreColor();
模型动态设置比例
marker.setScale(5) //放大五倍
模型播放动画
//使用默认参数来模型动画播放
marker.playAnimation('light-on') //播放 "light-on" 动画
//设置详细参数来模型动画播放
marker.playAnimation({
name:'light-on', //动画名称
repeat: 1, //动画执行多少次
time: 1, //动画执行时间 /s
loop: false, //是否循环执行动画
callback: function(){ //动画执行完成回调
console.log('动画执行完成')
},
})
//停止模型动画播放
marker.stopAnimation();
模型发光报警
//1.开启发光报警光圈效果
marker.glow({
color:'#00FF00', //设置报警光圈颜色
height:1, //设置报警光圈高度
scale:2 //设置报警光圈效果大小
});
//2.停止发光报警光圈效果
marker.stopGlow();
沿固定路径移动
var points = [
{
x: 12683435.841512972,
y: 2557888.6579067316,
fnum: 1,
// offset:0
},
{
x: 12683433.708513774,
y: 2557872.0505466303,
fnum: 1,
// offset:0
}]
marker.movePath({
//time:10, //在指定时间完成移动。与speed参数二选一
speed: 10, //速度，设置此项则忽略time
loop: true, //是否循环执行
orientToPathDegree:0, //物体移动沿向路径方向的角度
path: points, //路径点集
offsetHeight: 0, //移动时的高度
followPosition:true,//第一人称视角，跟随移动位置
followScaleLevel:1,//第一人称视角，跟随缩放三维场景大小
viewTiltAngle:map.maxPolarAngle,//第一人称视角，三维场景俯仰角
followAngle:true, //第一人称视角，根据路径来动态变换三维场景角度
orientToPath:true, //物体移动时是否沿向路径方向
angle:0, //物体移动沿向路径方向的角度
complete: function() {
//动画执行完成回调事件
},
onMoving: function(e) {
//路径移动实时回调
//获取模型移动中的实时位置
console.log(e)
},
});