const marker3d = new esmap.ES3DMarker({
x: map.center.x, // x轴坐标
y: map.center.y, // y轴坐标
id: 10002, // 自定义id
name: 'myTree', // 自定义name
url: url, // 模型的文件地址
size: 1, // 尺寸
callback: function () {
// 模型添加到三维场景的回调函数
}
});
/* 获取"一楼"的楼层对象,并且创建"一楼"的三维模型标注层,其他楼层以此类推 */
floor = map.getBuildingById(0).getFloor(1);
modelLayer = floor.getOrCreateLayerByName('modelLayer',esmap.ESLayerType.MODEL3D);
modelLayer.addMarker(marker3d); // 将三维模型标注添加进"对应楼层"的标注层
// 加载3d模型是异步操作,创建成功后会触发callback回调函数
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | |
|---|---|---|---|---|---|
| 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|Array|null | Number: 0 - 23, 如配置 15,
则超过15级显示 Array:[10, 20]: 在10~20级显示 null: 一直显示 |
16 | 否 |
| callback | 模型加载完成事件回调函数 | Function | —— | 否 |
Tips:加载3d模型是异步操作,如果需要调用marker的方法或属性,建议使用promise等方法加载
const promise = new Promise(res => {
// 创建模型标注实例
const marker3d = new esmap.ES3DMarker({
x: map.center.x,
y: map.center.y,
callback: (mode)=> {
// 模型添加到三维场景的回调函数
res(mode)
},
});
/* 获取"一楼"的楼层对象,并且创建"一楼"的三维模型标注层,其他楼层以此类推 */
floor = map.getBuildingById(0).getFloor(1);
modelLayer = floor.getOrCreateLayerByName('modelLayer',esmap.ESLayerType.MODEL3D);
modelLayer.addMarker(marker3d); // 将三维模型标注添加进"对应楼层"的标注层
})
promise.then( (marker)=> {
// 执行promise后异步得到模型标注marker,可以执行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 // 显示标注
marker.jump({
times: 100, // 跳跃执行100次
duration: 1, // 持续1秒
delay: 0.5, // 每次跳跃的间隔,默认为0
height: 10 // 跳跃的三维场景高度
});
// 停止跳跃
marker.stopJump();
marker.rotateTo(150) // 支持传递数字来旋转
marker.rotateTo({ // 或者传递更详细的参数
angle: 30, // 角度,单位(度/°)
time: 0.6, // 旋转动画时间
onComplete: ()=>{
console.log('旋转结束')
}
})
marker.setScale(5); // 放大五倍
marker.restoreScale(); // 恢复原始设置大小
marker.fadeOut({
time: 1, // 默认渐隐动画时间是1秒
callback:()=>{
console.log('渐隐结束')
}
})
marker.fadeIn({
time: 1, // 默认渐显动画时间是1秒
callback:()=>{
console.log('渐显结束')
}
})
// 方法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, // 设置光圈效果透明度
height:2, // 设置光圈高度
});
marker.stopGlow(); //停止发光报警光圈效果
// 如果是移动到另外楼层,需要自行删除此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, // 是否朝向路径
})
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过程中支持暂停继续
marker.pauseMovePath(); // 暂停移动
marker.resumeMovePath(); // 继续移动
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| 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 | —— | 否 |
// 每个模型都有自带的动画,可在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();
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| 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 | —— | 否 |
