您现在的位置: 首页 > 室内三维可视化SDK开发 > 开发指南

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

切换三维场景背景

 

map.on('loadComplete', function () {
  //1.直接设置三维场景背景
  map.setBackgroundImage('./image/bg.jpg');  
  //2.设置为纯色背景色
  map.setBackgroundImage(null); //有背景图片时先取消，无背景图片则不需要此代码
  map.setBackgroundColor('#FF0000');   //修改背景颜色  
});
            

添加楼层控制控件:

 

// 1.声明楼层控件配置参数
//esmap.ESControlPositon类型定义
//LEFT_TOP: 1, LEFT_BOTTOM: 2, RIGHT_TOP: 3, RIGHT_BOTTOM: 4
var ctlOpt = new esmap.ESControlOptions({
    position: esmap.ESControlPositon.RIGHT_TOP, 
    //位置x,y的偏移量
    offset: {
        x: 0,
        y: 0
    },
    //(以下是2021.11新增参数)
    textColor:'#000',   //字体颜色
    toggleColor:'#1F6ED4', //单层多层按钮和2d3d按钮颜色
    bgColor:'#FFF',  //背景颜色
    borderRadius:5,   //圆角
    focusTextColor:'#FFF',  //聚焦楼层字体颜色
    focusBgColor:'#1F6ED4',  //聚焦楼层背景颜色
    scale:1,  //放大比例
    showBtnCount: 3,//显示按钮个数
});

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

    //单层多层切换按钮
    var toolControl = new esmap.ESToolControl(map);

    //或者折叠式按钮的楼层控件
    //floorControl = new esmap.ESButtonFloorsControl(map, ctlOpt);
});
        

添加放大缩小控制控件

 

1.声明放大、缩小控件配置参数
//esmap.ESControlPositon类型定义
//LEFT_TOP: 1, LEFT_BOTTOM: 2, RIGHT_TOP: 3, RIGHT_BOTTOM: 4
var ctlOpt1 = new esmap.ESControlOptions({
    position: esmap.ESControlPositon.LEFT_TOP, //位置 左上角
    //位置x,y的偏移量
    offset: {
        x: 20,
        y: 80
    }
    , imgURL: "image/wedgets/"
});

2.在三维场景加载完成事件中新建控件对象
map.on('loadComplete', function () {
    //创建放大、缩小控件
    var zoomControl = new esmap.ESZoomControl(map, ctlOpt1);
});
            

显示三维场景比例尺

 

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:自定义指北针指针图片地址
            

添加二三维切换开关

 

1.在HTML中加入按钮

<button id="btn2D" class="btn btn-default">2D</button>
<button id="btn3D" class="btn btn-default">3D</button>
            

2.在javaScript中进行事件绑定

//2维模式
$('#btn2D').on('click', function () {
    map.viewMode = esmap.ESViewMode.MODE_2D;//2维模式
});

//3维模式
$('#btn3D').on('click', function () {
    map.viewMode = esmap.ESViewMode.MODE_3D;; //3维模式
});