查看文章 |
用OpenLayers实现WebGIS客户端 登录http://www.openlayers.org,下载OpenLayers的压缩包。 OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers实现访问地理空间数据的方法都符合行业标准。比如OpenGIS的WMS和WFS规范。OpenLayers采用面向对象方式开发,并使用来自Prototype.js和Rico中的一些组件。OpenLayers支持的地图来源包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用简单的图片作为源,在这一方面OpenLayers提供了非常多的选择。 从OpenLayers2.2版本以后,OpenLayers已经将所用到的Prototype.js组件整合到了自身当中,并不断在Prototype.js的基础上完善面向对象的开发,Rico用到地方不多,只是在OpenLayers.Popup.AnchoredBubble类中圆角化DIV。OpenLayers2.4版本以后提供了矢量画图功能,方便动态地展现“点、线和面”这样的地理数据。 实例说明 以创建一个index.html作为查看地图的页面为例。导入OpenLayers.js和你将要创建的js。内容需要一个div,我们给它的id起名叫做area。你有必要在写一些CSS限定#area的宽度和高度,如果乐意,加上一个border也是很不错的选择。
我们首先要创建一个OpenLayer.Map对象的实例: var map = new OpenLayers.Map("area"); 其中的参数可以传id,也可以传ElementObject,当然id更加方便一些。
接下来就是向地图中添加图层,通常情况下使用OpenLayers.Layer的子类来完成图层的初始化。 OpenLayers提供了一下Layers的扩展:
OpenLayers.Layer.Image OpenLayers.Layer.HTTPRequest OpenLayers.Layer.Grid OpenLayers.Layer.WMS OpenLayers.Layer.KaMap OpenLayers.Layer.EventPane OpenLayers.Layer.Google OpenLayers.Layer.VirtualEarth OpenLayers.Layer.Markers OpenLayers.Layer.Text OpenLayers.Layer.GeoRSS OpenLayers.Layer.Boxes OpenLayers.Layer.TMS
Image类封装一个实际图象作为图曾内容 HTTPRequest类可以接收一个动态生成的图片,你可以通过HTTPRequest类的参数向服务器发送参数 Grid类是HTTPRequest类的子类,提供更加详细的方法 WMS类用于连接WMS服务器以获得图象 KaMap类用于连接MapServer EventPane类作为用于接收用户操作的图层 Google类用于从Google获得图象,它仍然需要你从Google获得API KEY,并且include VirtualEarth类用于操作VirtualEarth的图层 Markers类用于生成接收和显示用户本地标记的图层 Text类用于接收CSV文件 GeoRSS类是Marker类的子类,用于封装接收GeoRSS并在图层中作出marker Boxes同样也是Marker类的子类,可以用div来做marker,而非image TMS用于接收TMS服务器的地图
创建完图层后,可以用Map的addLayer(layer)方法插入,并执行Map的zoomToMaxExtent()方法让地图合适地显示。
OpenLayers还提供了丰富的Control类为地图浏览添加一些工具,继承自OpenLayers.Control类
OpenLayers.Control.LayerSwitcher OpenLayers.Control.MouseDefaults OpenLayers.Control.MousePosition OpenLayers.Control.MouseToolbar OpenLayers.Control.OverviewMap OpenLayers.Control.PanZoom OpenLayers.Control.PanZoomBar OpenLayers.Control.Permalink OpenLayers.Control.Scale
这些类的实例会在地图浏览的“窗口”上增加一些工具栏或是“按钮”,增加互动性和功能性。
OpenLayers对常用的数据结构进行了封装 OpenLayers.LonLat OpenLayers.Size OpenLayers.Pixel OpenLayers.Bounds 以便于操作。 此外OpenLayers.Util类可以对图片载入错误时图片框的颜色和图片框中默认的图片进行自定义,这一点是非常方便的。OpenLayers的Ajax类对创建XMLHttpRequest对象的过程进行了封装,可以使用它进行简单的Ajax操作。 附录
相关网站和讨论组 OGC官方网站:http://www.opengis.org PostgreSQL官方网站:http://www.postgresql.org uDig官方网站:http://udig.refractions.net OpenLayers官方网站:http://www.openlayers.org GeoTools官方网站:http://www.geotools.org
GeoServer QQ群:4825849 |