您现在的位置: 首页 > SDK开发 > 开发指南


地图添加控件 大部分控件都需在地图加载完成后,才能与地图有交互。

切换地图背景

 

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

添加楼层控制控件:

 

// 1.声明楼层控件配置参数
var ctlOpt = new esmap.ESControlOptions({
    position: esmap.ESControlPositon.RIGHT_TOP, 
    imgURL: "image/wedgets/"
});

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

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

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

添加放大缩小控制控件

 

1.声明放大、缩小控件配置参数
var ctlOpt1 = new esmap.ESControlOptions({
    position: 1, //位置 左上角
    //位置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;     //显示指北针    
            

添加二三维切换开关

 

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维模式
});