openlayers前端样例

日期:2014-02-25点击次数:10732

1 openlayers介绍
       OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等,用户还可以用简单的图片地图作为背景图,与其他的图层在OpenLayers 中进行叠加,在这一方面OpenLayers提供了非常多的选择。除此之外,OpenLayers实现访问地理空间数据的方法都符合行业标准。OpenLayers 支持Open GIS 协会制定的WMS(Web Mapping Service)和WFS(Web Feature Service)等网络服务规范,可以通过远程服务的方式,将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。OpenLayers采用面向对象方式开发,并使用来自Prototype.js和Rico中的一些组件。
      OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问。从OpenLayers2.2版本以后,OpenLayers已经将所用到的Prototype.js组件整合到了自身当中,并不断在Prototype.js的基础上完善面向对象的开发,Rico用到地方不多,只是在OpenLayers.Popup.AnchoredBubble类中圆角化DIV。OpenLayers2.4版本以后提供了矢量画图功能,方便动态地展现“点、线和面”这样的地理数据。
       在操作方面,OpenLayers 除了可以在浏览器中帮助开发者实现地图浏览的基本效果,比如放大(Zoom In)、缩小(Zoom Out)、平移(Pan)等常用操作之外,还可以进行选取面、选取线、要素选择、图层叠加等不同的操作,甚至可以对已有的OpenLayers 操作和数据支持类型进行扩充,为其赋予更多的功能。例如,它可以为OpenLayers 添加网络处理服务WPS 的操作接口,从而利用已有的空间分析处理服务来对加载的地理空间数据进行计算。同时,在OpenLayers提供的类库当中,它还使用了类库Prototype.js 和Rico 中的部分组件,为地图浏览操作客户端增加Ajax效果。
2 配置
2.1 所需文件

http://openlayers.org/download/OpenLayers-2.12.zip  openlayers压缩包下载地址
2.2 配置过程
拷贝目录下的OpenLayer.js、根目录下的lib目录、根目录下的img目录到工程的webapp /ol目录下(ol目录文件夹是自己创建的,webapp下的目录结构可以自己决定,以便管理)。 然后,创建一个*.jsp作为查看地图的页面。
3 涉及operlayers功能
3.1 涉及的功能接口有:

OpenLayers.Map:OpenLayers.Map实例是嵌入在网页中的互动地图。创建新地图。
OpenLayers.Layer.OSM:此层允许访问OpenStreetMap的瓦片,不提供参数时使用默认的图层结构,也可以指定图层结构对象。
OpenLayers.StyleMap:图层的样式设置。
OpenLayers.Layer.Vector:用于呈现从各种来源中的矢量数据,创建一个新的载体与OpenLayers.Layer.Vector构造层。
OpenLayers.Control:控制影响地图显示或行为(包括:放大缩小,地图比例尺,添加鹰眼图,图层切换工具等行为)。
OpenLayers.Strategy.Save:提交新创建或修改的功能。
3.2 已实现的页面功能:
1. 地图缩放
2. 添加标记
3. 移动标记
4. 删除标记
3.3 代码说明:
1.


2.


点击左上角的按钮可以缩放地图。
3.

对应的效果:

4

5.

对应效果:


6.

7.

对应该效果:

选择修改工具后,再点击下想要修改的标记,这时可以拖动该标记,并放到适当的位置。
8.

对应该效果:


点击想要删除的图标,即可删除。



 

软件部    王涛