控件

地图控件概述

地图窗口上负责与用户交互的UI元素称为控件。GeoGlobe API中提供了丰富的控件,同时您还可以通过继承Control类来实现自定义控件;

GeoGlobe API中提供的控件有:

Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类您可实现自定义控件;

PanZoomBar:导航控件,可通过点击该控件控制地图的放大、缩小、平移等;

GeoOverviewMap:缩略图控件(鹰眼),一般在地图的最右下方,是一个可折叠的缩略地图;

ScaleLine:比例尺控件,可修改该控件的样式,使之出现在地图的任意位置,显示地图的比例关系;

MousePosition:坐标信息控件,该控件包含坐标的x、y值等信息;

DistanceMeasure、AreaMeasure:测量控件包括距离测量控件和面积测量控件,可量算地图上的长度、面积等等信息;

Attribution:图层信息控件,显示地图窗口中各图层的图层信息;

TimeSlider:时间轴控件,在地图窗口上显示一个时间轴;

MapContextMenu:地图右键控件,在地图窗口上右键点击鼠标,可显示右键菜单;

PrintMap:地图打印控件,添加到地图窗口上,点击该控件,可打印该地图的当前视口;

在地图中添加控件

在html页面上,可使用Map.addControl()方法向地图添加控件。在此之前需要对地图进行初始化。例如,要将标准地图控件添加到地图中,可在代码中添加如下内容:

var map = new Geo.View2D.Map("mapcontainer");//这个mapcontainer就是存放地图的dom容器id
map.setCenter(new Geo.LonLat(116.404, 39.915), 11);
map.addControl(new Geo.View2D.Control.Navigation());

可以在地图中添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件控件。在地图中添加控件后,它们即刻生效。

map.addControl(new Geo.View2D.Control.PanZoomBar());
map.addControl(new Geo.View2D.Control.ScaleControl());
map.addControl(new Geo.View2D.Control.GeoOverviewMap());
									
控制控件位置

初始化控件时,这里以导航控件为例,默认停靠位置是地图窗口的左上角,可采用在参数中配置,来控制控件在地图窗口中的显示位置,下面的两组代码分别是偏移量是0和20,两图显示对应控件位置的差别。

map.addControl(new Geo.View2D.Control.PanZoomBar({
	zoomWorldIcon:false,
	position: new OpenLayers.Pixel(0, 0)
 }));

map.addControl(new Geo.View2D.Control.PanZoomBar({
	zoomWorldIcon:false,
	position: new OpenLayers.Pixel(20, 20)
 }));

控件位置偏移器窗口

除了在构造函数的参数中指定停靠位置外,还可以通过全局的偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同,那么控件可能会重叠在一起,这时就可以通过偏移值使二者分开显示。 本示例将比例尺放置在地图的左下角,由于API默认会有版权信息,因此需要添加一些偏移值以防止控件重叠。下图的这个效果和在初始化参数中设置效果一样

Geo.View2D.Control.PanZoom.X = 10
Geo.View2D.Control.PanZoom.Y = 10
修改控件配置

GeoGlobe API的控件提供了丰富的配置参数,您可参考API文档来修改它们以便得到符合要求的控件外观。还是以PanZoomBar导航控件为例,下图依次展示了参数不同时的控件外观:

map.addControl(new Geo.View2D.Control.PanZoomBar({
	zoomWorldIcon:true
				}));
map.addControl(new Geo.View2D.Control.PanZoomBar({
	panIcons:false
				}));
自定义控件

GeoGlobe API允许您通过继承Control来创建自定义地图控件。 要创建可用的自定义控件,您需要做以下工作:

定义一个以Geo.Class自定义控件的函数。

在第一个参数中要写明是Geo.View2D.Control,以便继承控件基类。

实现initialize()方法,这个方法是自定义控件的入口方法

定义构造函数并继承Control

首先您需要定义自定义控件的以Geo.Class包裹的函数,,接着第一个参数设置为Geo.View2D.Control使其继承于Control。在下面的示例中我们定义一个名为myControl的控件,每一次点击将地图放大两个级别。它具有文本标识,而不是平移缩放控件中使用的图形图标。

//定位到福州市区中心点
var myControl = Geo.Class(Geo.View2D.Control/* 这个就是基类 */, {
	initialize: function(options){
		// 这个是调用基类的initialize方法
		...
		OpenLayers.Control.prototype.initialize.apply(this, arguments);
	}
})

初始化自定义控件

当调用map.addControl()方法添加自定义控件时,API会调用该对象的initialize()方法用来初始化控件,您需要实现此方法并在其中创建控件所需的DOM元素,并添加DOM事件。所有自定义控件中的DOM元素最终都应该添加到地图容器(即地图所在的DOM元素)中去,地图容器可以通过map.getContainer()方法获得。最后initialize()方法需要返回控件容器的DOM元素。添加自定义控件与添加其他控件方法一致,调用map.addControl()方法即可。

var myCtrl = new MyControl();
// 添加到地图中
map.addControl(myCtrl);