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

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

第一步:新建一个三维标注图层 (以下代码都要在 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) 
})

标注支持手动控制显隐:

marker.visible = false  // 隐藏标注
marker.visible = true   // 显示标注