您现在的位置: 首页 > SDK开发 > 开发指南


三维模型标注(收费功能)(SDK1.6版本及以上) 您可以向地图中添加各种高精度、有趣又炫酷的三维模型 boardMarker boardMarker

第一步,新建一个三维标注图层(以下代码都要在地图加载完成后调用map.on('loadComplete')


map.on('loadComplete',function(){
	//方法1,通过名字区别创建不同的layer
	var floorLayer = map.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.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)
    },
});