覆盖物

地图覆盖物概述

地图窗口上显示的浮动的内容,如标注(marker)、矢量要素(feature类,包括点、线和面等)、信息窗口(popup)等。覆盖物都拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。

GeoGlobe API中提供了如下几种覆盖物:

Marker:Geo.Marker类,标注表示地图上的点,可自定义标注的图标,在GeoglobeAPI中主要包含两大类:marker和GeoMarker,其中marker是GeoMarker的基类。添加方式主要是采用markerLayer.addMarker的方式;

Feature:Geo.Feature类,地图上的要素,包括点线面三种形态。可在地图的矢量图层(vectoryLayer)上用vectory.addFeatures(features)添加;

Popup:Geo.View2D.Popup类,表示地图上的浮云窗口。这是所有浮云类的基类,在这些浮云窗口里可动态嵌入html内容,它的子类派生类包括Geo.View2D.Popup.FramedCloud、Geo.View2D.Popup.AnchoredPopup等,可通过map.addPopup(popup)的方式将浮云添加到地图上;

标注

标注表示地图上的点。API提供了默认图标样式(defaultIcon),您也可以通过Geo.Icon类来指定自定义图标。Marker的构造函数的参数为lonlat(x、y坐标对)和icon。注意:当您使用自定义图标时,标注的地理坐标点将位于标注所用图标的中心位置,您可通过Icon的offset属性修改标定位置。 下面的示例向地图中心点添加了一个标注,并使用默认的标注样式。

var map = new Geo.View2D.Map("mapcontainer");//这个mapcontainer就是存放地图的dom容器id
map.setCenter(new Geo.LonLat(116.404, 39.915), 11);
var lonlat = new Geo.LonLat(116.404, 39.915);
var marker = new Geo.Marker(lonlat);        // 创建标注
map.addMarker(marker);

自定义标注图标

通过Geo.Icon类可实现自定义标注的图标,下面示例通过构造函数的icon参数进行设置。

var map = new Geo.View2D.Map("mapcontainer");//这个mapcontainer就是存放地图的dom容器id
map.setCenter(new Geo.LonLat(116.404, 39.915), 11);
var lonlat = new Geo.LonLat(116.404, 39.915);
var myIcon = new OpenLayers.Icon("markers.png", new Geo.Size(23, 23);
var marker = new OpenLayers.Marker(point, myIcon);
map.addMarker(marker);
									

监听标注事件

可通过events.register方式监听Marker的事件。可参考事件部分。

marker.events.register("click", function(){
   alert("您左键点击了标注");
});
									

标注销毁

如果您需要在地图中反复添加大量的标注,这可能会占用较多的内存资源。如果您的标注在移除后不再使用,可调用marker.destory()方法来释放内存。注意,调用此方法后标注将不能再次添加到地图上,如下所示,API会自动帮助您完成此工作。

您可以在标注被销毁后调用此方法:

map.removeMarker(marker);
									
浮云

浮云可以在地图窗口上显示HTML内容。浮云可直接在地图上的任意位置打开,也可以在标注对象上打开(此时浮云窗口的坐标与标注的坐标一致)。 您可以使用openlayers.popup来创建一个信息窗实例,注意同一时刻地图上可以有多个信息窗口同时处于打开状态。

var popup = new OpenLayers.Popup("World", new OpenLayers.LonLat(116.404, 39.915), new OpenLayers.Size(60, 60), "你要显示的html内容", false);  // 创建浮云对象
map.addPopup(popup);      // 添加到地图窗口

要素

添加点要素

可以自定义点的颜色、粗细和透明度。颜色可以是十六进制数字形式(比如:#ff0000)或者是颜色关键字(比如:red),还可以修改点要素的图片。

在Internet Explorer中,地图使用VML绘制折线;在其他浏览器中使用SVG或者Canvas。

以下代码段会在两点之间创建一个点:

var point = new Geo.Geometry.Point(116.399, 39.910);
var feature = new Geo.Feature.Vector(point);
vectoryLayer.addFeatures(feature);

添加线要素

var point = new Geo.Geometry.Point(116.399, 39.910);
var point = new Geo.Geometry.Point(114.134, 38.809);
var line1 = new Geo.Geometry.LinearRing([point1, point2]);
var feature_line = new Geo.Feature.Vector(line1);
vectoryLayer.addFeatures(feature_line);

添加面要素

var point_1 = new Geo.Geometry.Point(116.399, 39.910);
var point_2 = new Geo.Geometry.Point(114.134, 38.809);
var point_3 = new Geo.Geometry.Point(116.578, 40.312);
var point_4 = new Geo.Geometry.Point(117.687, 38.456);
var line_1 = new Geo.Geometry.LinearRing([point_1, point_2]);
var line_2 = new Geo.Geometry.LinearRing([point_3, point_4]);
var polygon = new Geo.Geometry.Polygon ([line_1, line_2]);
var feature_polygon = new Geo.Feature.Vector(polygon);
vectoryLayer.addFeatures(feature_polygon);