为地图添加控件


地图控件用于实现用户与地图之间的交互。常见的控件有:平移/缩放、比例尺、鹰眼(缩略图)、定位控件等。 以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("您当前使用的浏览器不支持地图定位服务");
}

在线演示与源码编辑

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