三维可视化场景添加控件
大部分控件都需在三维场景加载完成后,才能与三维场景有交互。
楼层控制控件
// 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:自定义指北针指针图片地址