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


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

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


//方法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.flash({
	    scale:1.5
	    //time:0.6  //闪烁时间,一般省略
	})
跳跃

	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"
	})
	//若需要还原颜色则将color设置为#000000 
动态设置比例

    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('动画执行完成')
        },  
    })
沿固定路径移动

    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,    //是否循环执行
        orientToPath:true,  //物体移动时是否沿向路径方向
        orientToPathDegree:0,  //物体移动沿向路径方向的角度
        path: points,   //路径点集
        offsetHeight: 0,   //移动时的高度
        complete: function() {
            //动画执行完成回调事件
        },
        onMoving: function(e) {
            //路径移动实时回调
            //获取模型移动中的实时位置
            console.log(e)
        },
    });