三维可视化场景添加控件 大部分控件都需在三维场景加载完成后,才能与三维场景有交互。

楼层控制控件

// 1.声明楼层控件配置参数
var ctlOpt = new esmap.ESControlOptions({
    // LEFT_TOP: 左上方, LEFT_BOTTOM: 左下方, RIGHT_TOP: 右上方, RIGHT_BOTTOM: 右下方
    position: esmap.ESControlPositon.RIGHT_TOP, // 控件放置位置
    // 位置x,y的偏移量
    offset: {
        x: 0,
        y: 0
    },
    textColor:'#000',       // 字体颜色
    toggleColor:'#1F6ED4',  // 单层多层按钮和2d3d按钮颜色
    bgColor:'#FFF',         // 背景颜色
    borderRadius:5,         // 圆角
    focusTextColor:'#FFF',  // 聚焦楼层字体颜色
    focusBgColor:'#1F6ED4', // 聚焦楼层背景颜色
    scale:1,                // 放大比例
    showBtnCount: 3,        // 显示按钮个数
    expandBtn: true,        // 显示楼层展开按钮
    expandSpan: 20,         // 楼层展开高度
    viewModeBtn: true,      // 显示2D/3D切换按钮
    fnumToggleBtn: true     // 显示多楼层切换按钮
});

// 2.在三维场景加载完成事件中新建楼层控制控件对象
map.on('loadComplete', function () {
    floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);
});

// 动态设置控件位置
floorControl.x = 0
floorControl.y = 0

三维场景比例尺控件

map.showScaler = true;     // 显示三维场景比例尺

指北针控件

// 添加指南针非常简单,只需要在三维场景初始化时声明以下属性即可
        
map.showCompass = true;     // 显示指北针

// 三维场景初始化时可以初始化指北针样式配置:
var map = new esmap.ESMap({
    // ...
    compassOffset:[5,5]            // 偏移坐标x,y
    compassSize:30,                // 指北针大小
    compassBackgroundUrl: bgUrl,   // 自定义指北针背景图片地址
    compassPointerUrl: pointerUrl  // 自定义指北针指针图片地址
})

// 也可以动态修改指北针图片样式:
// 动态修改指北针背景图片:
map.setCompassBgUrl(bgUrl);        // bgUrl:自定义指北针背景图片地址

// 动态修改指北针指针图片:
map.setCompassPointerUrl(pointerUrl);  // pointerUrl:自定义指北针指针图片地址