Wonder奇迹奇迹

导航

OpenLayers简单介绍以及简单实例

    OpenLayers是一个强大的JavaScript包，可以从它的官网免费下载。OpenLayers包含了很多强大的网页地图展示与操作功能，并且能够将不同源的图层展示在同一张地图中，支持各种第三方的地图API（如：Google,Yahoo,Bing,OSW,Baidu以及天地图等），当然OL也支持由你自己服务器（如Geoserver）发布的一些地图服务（WMS,WFS等）。

     下载好OL的包，将解压后文件夹中的OpenLayers.js文件、theme文件夹和img文件夹拷贝出来，放在你网页文件的同一个目录下（或其他你网页可以调用到的位置）。然后就可以新建一个html文件用于地图展示了。

     先来一段示例代码：

     

 1 <!DOCTYPE html>
 2 <html lang='en'>
 3 <head>
 4     <meta charset='utf-8' />
 5     <title>My OpenLayers Map</title>
 6     <script type='text/javascript' src='OpenLayers.js'></script>
 7     <script type='text/javascript'>
 8 
 9     var map;
10 
11     function init() {
12        map = new OpenLayers.Map('map_element', {
13        
14        });
15        var wms = new OpenLayers.Layer.WMS(
16            'wmsL',
17             'http://vmap0.tiles.osgeo.org/wms/vmap0',
18             {layers: 'basic'},
19             {IsBaseLayer: 'true'}
20     );
21 
22      map.addLayer(wms);
23      if(!map.getCenter()){
24       map.zoomToMaxExtent();
25      }
26 }
27 
28     </script>
29 </head>
30 <body onload='init();'>
31     <div id='map_element' style='width: 1000px; height: 500px;'></div>
32 </body>
33 </html>

以上有几个点需要注意：

1.第6行为引用下载的OpenLayers.js包的标签语句，其中src属性表示的便是OpenLayers包的位置，此处为相对路径。当然也可以引用绝对路径或官网的路径（要联网哦），引用OL官网路径的方式如下：

<script type='text/javascirpt'     src='http://openlayers.org/api/OpenLayers.js'></script>

2.注意OL中map和layer的概念，map是用来展示地图的容器，layer是来自服务器的图层，每个map可以加载0个，1个或多个layer。因为JavaScript是面向对象的语言，所以上面说的map和layer都是类，需要声明对象来实例化。layer有很多的子类，每种子类代表一种类型的图层，比如本例中的OpenLayers.Layer.WMS它用于显示WMS服务的图层，还有其他子类如：OpenLayers.Layer.Google（用于显示谷歌地图），OpenLayers.Layer.Vector（用于展示矢量图层）等等，这些类的具体属性以及初始化所需的参数，可以通过OpenLayers文档查询，本例中的OpenLayers.Layer.WMS的构造函数有四个参数，分别为WMS图层的名字、请求WMS服务的url（可以加上一些request参数）、这是一个包含多个键值对的匿名对象（这个对象里的键值对会作为参数传递给服务器）以及wms layer自己的一些属性设置（也是一些键值对组成的匿名对象）。本例中WMS图层的初始化过程为：

1  var wms = new OpenLayers.Layer.WMS(
2           'wmsL',
3           'http://vmap0.tiles.osgeo.org/wms/vmap0',
4           {layers: 'basic'},
5           {IsBaseLayer: 'true'}
6  );

第一个参数为图层名，第二个为服务器url，第三个为发给服务器的参数（本例中只有一个，表示请求的图层叫basic，可以有很多个，参见API文档），第四个参数为layer在客户端的一些属性，本例中表示这个图是基础图层。

3.刚才说了OpenLayers中map可以添加多个layer，那么有几种添加方法呢？本例中使用了map类的addLayer方法，除了这种方法还可以在map初始化时将已经声明好的layer作为其参数：

var map =new OpenLayers.Map('map_element',{layers:[Layer1,Layer2,...]});

4.要注意，map构造函数的第一个参数是将来要显示这个map的html标签的id（一般情况下使用div标签显示地图），第二个参数为包含map属性的匿名对象。

好了，一个简单的OL网页就需要注意这些了。

 

 

参考文献：OpenLayers 2.10 Beginner's Guide

 

posted on 2014-09-09 15:07  Wonder奇迹奇迹  阅读(2951)  评论(0)  编辑  收藏  举报