为地图添加控件

地图控件用于实现用户与地图之间的交互。常见的控件有：平移/缩放、比例尺、鹰眼(缩略图)、定位控件等。以iClient for JavaScript为例，可以通过SuperMap.Control类为地图添加合适的控件。其使用方法非常简单，例如：

var map = new SuperMap.Map('map', {controls: [new SuperMap.Control.PanZoomBar()]});

或者：

var map = new SuperMap.Map('map');
map.addControl(new SuperMap.Control.ScaleLine());

在线演示

平移/缩放控件

平移、缩放，是地图的基本操作，所以这类控件是最常用的。以iClient for JavaScript为例，平移缩放控件包括简易的、完整的、以及配合键盘操作的拉框缩放等类型。

简易缩放控件

最简单的缩放控件，可以只由放大、缩小这两个按钮组成。使用方式：

  //初始化简易缩放控件类
  zoom=new SuperMap.Control.Zoom();
  //加载控件
  map.addControl(zoom);
  //获取图层服务地址

完整的平移/缩放控件

一个完整的平移缩放控件，一般包括平移、缩小、放大以及缩放级别几个部分。在使用时可以根据需要对各个部分设置显示或不显示，以及显示的大小样式。

使用方式如：

  //初始化复杂缩放控件类
  panzoombar=new SuperMap.Control.PanZoomBar();
  //是否固定缩放级别为[0,16]之间的整数，默认为false
  panzoombar.forceFixedZoomLevel=true;
  //是否显示滑动条，默认值为false
  panzoombar.showSlider=true;
  //点击箭头移动地图时，所移动的距离占总距离（上下移动的总距离为高度，左右移动的总距离为宽度）的百分比，默认为null。 例如：如果slideRatio 设为0.5, 则垂直上移地图半个地图高度.
  panzoombar.slideRatio=0.5; 
  //设置缩放条滑块的高度，默认为120
  panzoombar.sliderBarHeight=180;
  //设置缩放条滑块的宽度，默认为13
  panzoombar.sliderBarWidth=17;

  map.addControl(panzoombar);

地图基础操作

在常见的在线地图中，创建地图时一般会默认把鼠标的平移、滚轮、点击事件作为地图的基础浏览操作，而不添加可以显示的控件。这样的鼠标操作，可以在不影响交互功能的基础上减少地图上的控件数量，减少地图被遮挡的面积，是目前在线地图的常用做法。

这些鼠标交互的基础浏览操作可以通过SuperMap.Control.Navigation控件实现。如果创建地图时没有设置任何控件，此控件则会默认添加到地图。

  map = new SuperMap.Map("map",{controls:[
              new SuperMap.Control.Navigation()
  ]});

比例尺控件

比例尺是地图上必不可少的元素，表达了图上距离与实际距离之间的参照关系。虽然现在有些在线地图精简控件，没有放置比例尺，但对于电子地图来说，比例尺依然是一个十分重要的控件。

比例尺控件的使用方式也比较简单，创建一个ScaleLine，然后添加到地图上即可。

  //初始化比例尺控件类
  scaleline = new SuperMap.Control.ScaleLine();

  map.addControl(ScaleLine);

鹰眼(缩略图)控件

鹰眼(缩略图)，是方便查看当前区域在地图上位置的一个控件，有的也称为鸟瞰图。

鹰眼控件的使用方式同样比较简单，创建一个OverviewMap，然后添加到地图上即可。

  //初始化鹰眼控件类
  overviewmap = new SuperMap.Control.OverviewMap();
  //属性minRectSize：鹰眼范围矩形边框的最小的宽度和高度。默认为8pixels
  overviewmap.minRectSize = 20;

  map.addControl(overviewmap);

定位控件

定位控件是在线地图特有的一种地图元素，点击后可根据GPS、IP等快速定位并在地图上标识使用者的当前位置。

以iClient for JavaScript为例，其定位控件包装了w3c 的Geolocation 接口。Geolocation API标准定义了获取相关设备所提供的地理位置信息的编程接口，这些位置信息的常见来源包括全球定位系统（GPS），以及通过诸如IP地址、RFID、WiFi和蓝牙的MAC地址、和GSM/CDMA手机ID的网络信号所做的推断。

添加定位控件Geolocate的方法并不复杂，如下所示：

    //添加geo定位控件
    geolocate = new SuperMap.Control.Geolocate({
        bind: false,
        geolocationOptions: {
            enableHighAccuracy: false,
            maximumAge: 0
        },
        eventListeners: {
            "locationupdated": getGeolocationCompleted,
            "locationfailed": getGeolocationFailed
        }
    });
    //添加控件
    map.addControl(geolocate);

//初始化图层
    positionLayer = new SuperMap.Layer.Markers("Markers");
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("China",url, {transparent: true, cacheEnabled: true, redirect: false}, {maxResolution:"auto"});
    layer.events.on({"layerInitialized": addLayer});
}

//添加图层
function addLayer() {
    var center = new SuperMap.LonLat(11733502.481499,4614406.969325);
    map.addLayers([layer,positionLayer]);
    map.setCenter(center, 4);
}

但是，除了创建控件，Geolocate控件还需要激活，并需要支持更新。

//激活控件，获取位置
function geoLocation(){
    if(!geolocate.active){
        geolocate.activate();
    }
    geolocate.getCurrentLocation();
}

//更新定位
function getGeolocationCompleted(event) {
    var lonLat = new SuperMap.LonLat(event.point.x,event.point.y);
    positionLayer.clearMarkers()
        size = new SuperMap.Size(44, 33),
            offset = new SuperMap.Pixel(-(size.w/2), -size.h),
                icon = new SuperMap.Icon("http://www.supermapol.com/static/portal/images/markers/mark_purple.png", size, offset);
    positionLayer.addMarker(new SuperMap.Marker(lonLat, icon));
    map.setCenter(lonLat);
}
function getGeolocationFailed(event){
    alert("您当前使用的浏览器不支持地图定位服务");
}

在线演示与源码编辑

您可以在线访问完整代码、体验演示效果，也可以直接在线编辑源码并实时查看效果。

为地图添加控件