三维可视化开发支持三维模型标注(收费功能)

您可以向三维可视化场景中添加各种高精度、有趣又炫酷的三维模型

第一步:新建一个三维标注图层 （以下代码都要在 map.on('loadComplete') 中调用） 

map.on('loadComplete',function(){
    // 获取第一层的楼层对象
    var building = map.getBuildingById('test666'); 
    var floorLayer = building.getFloor(1);  
    // 方法1，共用一个模型图层layer，需要添加到楼层对象
    var layer = new esmap.ESLayer(esmap.ESLayerType.MODEL3D);
    floorLayer.addLayer(layer);
    // 方法2，通过名字的区别获取或创建不同的模型图层layer，无需添加到楼层对象
    var layer = floorLayer.getOrCreateLayerByName('camera' , esmap.ESLayerType.MODEL3D);
})

第二步:创建一个三维模型标注实例 

var marker = new esmap.ES3DMarker({
    x: x,            // x轴坐标
    y: y,            // y轴坐标
    id: 10002,       // 自定义id
    name: 'myTree',  // 自定义name
    url: url,        // 模型的文件地址
    size: 1,         // 尺寸
    callback: function () {
        // 模型添加到三维场景的回调函数
    }
});
参数说明
参数 说明 类型 默认值 是否必填
x x轴坐标 Number —— 是
y y轴坐标 Number —— 是
url 模型的文件地址 String —— 是
size 模型尺寸大小 Number —— 是
id id标识 Number 10001 否
name 自定义name String es3dmarker 否
angle 模型旋转角度 Number 0 否
height 模型初始位置高度 Number 0 否
showLevel 到达三维场景缩放等级隐藏模型 Number 23 否
callback 模型加载完成事件回调函数 Function —— 否

第三步:将三维模型标注添加到图层 

layer.addMarker(marker);

第四步:启动三维场景模型加载队列

// 该方法用于通知三维场景加载3d模型。如果一个图层上有多个3d模型，可以在添加完毕后统一调用一次。
layer.show3D()

Tips:加载3d模型是异步操作，如果需要调用marker建议使用promise等方法加载 

var promise = new Promise(res => {
    // 获取第一层的楼层对象
    var building = map.getBuildingById('test666'); 
    var floorLayer = building.getFloor(1);  
    // 共用一个模型图层layer
    var layer = new esmap.ESLayer(esmap.ESLayerType.MODEL3D);
    // 将共用的模型图层添加到楼层对象上
    floorLayer.addLayer(layer);
    // 创建模型标注实例
    var marker = new esmap.ES3DMarker({
        x: map.center.x,  
        y: map.center.y,
        callback: function (mode) {
        // 模型添加到三维场景的回调函数
        res(mode)
        },
    });
    // 将三维模型标注添加到图层上
    layer.addMarker(marker);
})

promise.then(function (marker) { 
    // 执行promise后异步得到模型标注marker
    console.log(marker) 
})

标注的销毁和显隐方法
销毁方法： 
// 首先获取"对应楼层"的楼层对象
floor = map.getBuildingById(0).getFloor(1); // 这里获取到"一楼"楼层对象

// 方法1：销毁某个楼层所有的多边形标注层
floor.removeLayersByTypes(esmap.ESLayerType.MODEL3D);

// 方法2：根据标注层名字销毁某个楼层的多边形标注层
floor.removeLayersByNames('modelLayer');

// 方法3： 销毁该标注层里的某一个多边形标注
modelLayer.remove(marker); 

// 方法4： 销毁该标注层的所有标注
modelLayer.removeAll();
标注支持手动控制显隐： 
marker.visible = false  // 隐藏标注
marker.visible = true   // 显示标注


标注常用方法：
1.跳跃动画
marker.jump({
    times: 100,  // 跳跃执行100次
    duration: 1, // 持续1秒
    delay: 0.5,  // 每次跳跃的间隔，默认为0
    height: 10   // 跳跃的三维场景高度
});

// 停止跳跃
marker.stopJump();

2."设置旋转" 和 "缩放大小"
marker.rotateTo(150)   // 支持传递数字来旋转
marker.rotateTo({  // 或者传递更详细的参数
    angle: 30,     // 角度，单位(度/°)
    time: 0.6,     // 旋转动画时间
    onComplete: ()=>{
        console.log('旋转结束')
    }
})

marker.setScale(5);       // 放大五倍
marker.restoreScale();    // 恢复原始设置大小

3."渐隐" 和 "渐显"
marker.fadeOut({
    time: 1,        // 默认渐隐动画时间是1秒
    callback:()=>{
        console.log('渐隐结束')
    }
})

marker.fadeIn({
    time: 1,        // 默认渐显动画时间是1秒
    callback:()=>{
        console.log('渐显结束')
    }
})

4."更改颜色" 和 "发光报警"
// 方法1: 通过map对象搜索marker更改颜色
map.change3dColor({    // 单个模型
    id: 0,             // 指定的单个模型id
    // name: 'model',  // 或者指定模型的name
    // fnum: [1,2]     // 楼层范围
    color: '#00ff00'
})
map.change3dColor({    // 多个模型
    id: [1,2,3],       // 指定的多个模型id
    // fnum: [1,2]     // 楼层范围
    color: '#00ff00'
})
// 若需要还原默认颜色把color设为false


// 方法2: 通过调用marker自带API更改颜色
marker.changeColor('#FF0000');   // 改变模型为红色
marker.restoreColor();           // 还原默认颜色

// 三维模型发光报警
marker.glow({
    color: '#00FF00', // 设置光圈颜色
    scale: 2,         // 设置光圈效果大小
    opacity: 0.2,     // 设置光圈效果透明度
});

marker.stopGlow();    //停止发光报警光圈效果

5.移动三维模型位置(moveTo)
// 如果是移动到另外楼层,需要自行删除此marker,然后新建立一个标注添加到对应楼层的标注层上面
marker.moveTo({
    x: marker.mapCoord.x + 10, // 目标点x轴
    y: marker.mapCoord.y + 10, // 目标点y轴
    z: marker.mapCoord.z + 10, // 目标点高度z轴
    time: 0, // 位移动画时间，单位（秒/s）
    orientToPath: true,        // 是否朝向路径
})

6.支持沿着路径移动(movePath)
let points =[       // 线段数据
    { "x":map.center.x, "y":map.center.y, "fnum":1, "offset":2 },
    { "x":map.center.x + 20, "y":map.center.y + 20, "fnum":1, "offset":2 },
    { "x":map.center.x - 20, "y":map.center.y - 20, "fnum":1, "offset":2 },
];
marker.movePath({
    speed: 10,          // 速度m/s，设置此属性则忽略time属性
    loop: true,         // 是否循环执行
    path: points,       // 路径点集
    offsetHeight: 0,    // 移动时的偏移高度
    complete:  ()=> {
        // 执行完movePath的回调函数
    },
    onMoving:  (e)=>{
        // 一直在执行movePath时的回调函数
    },
})

// 执行movePath过程中支持暂停继续
marker.pauseMovePath();     // 暂停移动
marker.resumeMovePath();    // 继续移动
movePath方法参数说明:
参数 说明 类型 默认值 是否必填
time 指定时间内完成移动(设置此值忽略speed) Number —— 与speed参数二选一
speed 移动速度(设置此值忽略time) Number —— 与time参数二选一
path 路径点集 Array —— 是
loop 是否循环执行 Boolean false 否
loopReverse 是否反向循环执行 Boolean false 否
offsetHeight 高度偏移 Number 0 否
orientToPath 模型移动时是否朝向路径方向 Boolean true 否
followPosition 是否跟随第一人称视角移动 Boolean false 否
followAngle 是否根据路径来动态变换三维场景角度 Boolean false 否
followTilt 是否跟随俯仰角 Boolean false 否
followSmooth 平滑跟随程度 Number 0 否
viewTiltAngle 第一人称视角的三维场景俯仰角 Number 0 否
angle 模型移动朝向路径方向的角度 Number 0 否
maxViewDistance 最大可视距离 Number 0 否
minViewDistance 最小可视距离 Number 0 否
complete 动画执行完成回调事件 Function —— 否
onMoving 路径移动实时回调 Function —— 否

7.播放模型动画(playAnimation)
// 每个模型都有自带的动画,可在marker.animations属性上查看
const animateName = marker.animations[0];   // marker.animations是一个数组，里面存储了模型动画名词

// 演示使用默认参数来播放模型动画
marker.playAnimation(animateName)     // 播放模型指定动画

// 设置详细参数来模型动画播放
marker.playAnimation({
    name: animateName,         // 动画名称
    time: 2.5,                 // 执行时间/s
    loop: false,               // 是否循环执行动画
    callback: ()=>{     // 动画执行完成回调
        console.log('动画执行完成')
    },  
})
// 停止模型动画播放
marker.stopAnimation();
playAnimation方法参数说明:
参数 说明 类型 默认值 是否必填
name 动画名称 String —— 是
delay 延迟播放时间/s Number 0 否
time 动画时长/s Number 1 否
repeat 动画播放次数 Number 1 否
loop 是否循环执行动画(开启时repeat属性无效) Boolean false 否
clampWhenFinished 是否在播放完成后保持最后一帧 Boolean false 否
stopLastAction 是否停止上一个动画 Boolean true 否
callback 动画执行完成的回调 Function —— 否