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

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

先来一段示例代码：

 <!DOCTYPE html>

 <html lang='en'>

 <head>

     <meta charset='utf-8' />

     <title>My OpenLayers Map</title>

     <script type='text/javascript' src='OpenLayers.js'></script>

     <script type='text/javascript'>

     var map;

     function init() {

        map = new OpenLayers.Map('map_element', {

        });

        var wms = new OpenLayers.Layer.WMS(

            'wmsL',

             'http://vmap0.tiles.osgeo.org/wms/vmap0',

             {layers: 'basic'},

             {IsBaseLayer: 'true'}

     );

      map.addLayer(wms);

      if(!map.getCenter()){

       map.zoomToMaxExtent();

      }

 }

     </script>

 </head>

 <body onload='init();'>

     <div id='map_element' style='width: 1000px; height: 500px;'></div>

 </body>

 </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图层的初始化过程为：

  var wms = new OpenLayers.Layer.WMS(

           'wmsL',

           'http://vmap0.tiles.osgeo.org/wms/vmap0',

           {layers: 'basic'},

           {IsBaseLayer: 'true'}

  );

第一个参数为图层名，第二个为服务器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

OpenLayers简单介绍以及简单实例的更多相关文章

  1. 【转载】salesforce 零基础开发入门学习（三）sObject简单介绍以及简单DML操作（SOQL）

    salesforce 零基础开发入门学习(三)sObject简单介绍以及简单DML操作(SOQL)   salesforce中对于数据库操作和JAVA等语言对于数据库操作是有一定区别的.salesfo ...

  2. JSONP和CORS两种跨域方式的简单介绍和解决方案实例

    随着软件开发分工趋于精细,前后端开发分离成为趋势,前端同事负责前端页面的展示及页面逻辑处理,服务端同事负责业务逻辑处理同时通过API为前端提供数据也为前端提供数据的持久化能力,考虑到前后端同事开发工具 ...

  3. 权限控制框架Shiro简单介绍及配置实例

    Shiro是什么 http://shiro.apache.org/ Apache Shiro是一个非常易用的Java安全框架,它能提供验证.授权.加密和Session控制.Shiro非常轻量级,而且A ...

  4. salesforce 零基础开发入门学习（三）sObject简单介绍以及简单DML操作（SOQL）

    salesforce中对于数据库操作和JAVA等语言对于数据库操作是有一定区别的.salesforce中的数据库使用的是Force.com 平台的数据库,数据表一行数据可以理解成一个sObject变量 ...

  5. JS简单介绍与简单的基本语法

    1.JavaScirpt是一门编程语言,是为前端服务的一门语言. (1)基础语法 (2)数据类型 (3)函数 (4)面向对象 2.还涉及到BOM和DOM (1)BOM(操作浏览器的一些功能) (2)D ...

  6. WEKA简单介绍与资源汇总

    简单介绍 Weka是一个开源的数据挖掘软件,里面集成了很多经典的机器学习算法,在高校和科研机构中受到了广泛的应用. 具体的简单介绍和简单的使用请參考文档:<使用Weka进行数据挖掘>. 学 ...

  7. 【Android 应用开发】 ActionBar 样式具体解释 -- 样式 主题 简单介绍 Actionbar 的 icon logo 标题 菜单样式改动

    作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...

  8. 实例级别和类级别的static、构造函数、字段属性的简单介绍

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 实例级别 ...

  9. 以登录实例简单介绍Servlet使用

    1.简单介绍 Java Servlet 是执行在 Web server或应用server上的程序,使用 Servlet.您能够收集来自网页表单的用户输入.呈现来自数据库或者其它源的记录.还能够动态创建 ...

随机推荐

  1. 转：程序员最值得关注的10个C开源项目

    程序员最值得关注的10个C开源项目 1. Webbench Webbench 是一个在 linux 下使用的非常简单的网站压测工具.它使用 fork ()模拟多个客户端同时访问我们设定的 URL,测试 ...

  2. Multipath多路径冗余全解

    一.什么是multipath 普通的电脑主机都是一个硬盘挂接到一个总线上,这里是一对一的关系.而到了有光纤组成的SAN环境,由于主机和存储通过了光纤交换机连接,这样的话,就构成了多对多的关系.也就是说 ...

  3. RAC 集群更换IP

    RAC 集群更换 IP 主要分三步:停集群服务.配置服务器网络.修改集群配置.下面是同网段内更换 IP 示例.(r7.r8为服务器名称,orcl为ORACLE_SID,scanip为 scan 名称) ...

  4. mysql使用笔记（二）

    一.启动和关闭mysql服务 windows下 启动 (方法1)管理员权限进入cmd,执行 net start mysql (方法2)管理员权限进入cmd,执行 mysqld -uroot --con ...

  5. JavaScript高阶函数的应用

    定义 高阶函数是指至少满足下列条件之一的函数: 函数可以作为参数被传递: 函数可以作为返回值输出. JavaScript语言中的函数显然满足高阶函数的条件,在实际开发中,无论是将函数当作参数传递,还是 ...

  6. 栈 - 从零开始实现by C++

    参考链接:数据结构探险-栈篇 学了队列之后,栈就很简单了,换汤不换药.   栈 栈的模型 后进先出(电梯,进制转换,括号的匹配检测)   栈的基本元素 栈顶,栈底(一般很少用到),栈容量,栈长度 注意 ...

  7. Sqoop安装配置及数据导入导出

    前置条件 已经成功安装配置Hadoop和Mysql数据库服务器,如果将数据导入或从Hbase导出,还应该已经成功安装配置Hbase. 下载sqoop和Mysql的JDBC驱动 sqoop-1.2.0- ...

  8. Eclipse 配置Tomcat

    1.Eclipse EE 配置Tomcat Eclipse EE 主要用于Java Web开发和J2EE项目开发.Eclipse EE中配置Tomcat比较简单,新建一个Tomcat Server即可 ...

  9. 设置DIV最小高度以及高度自适应随着内容的变化而变化

    <!--退租账单--> <div id="bilsli" onmouseover="showBill(this)"> #bilsli{ ...

  10. HTTP协议中PUT和POST使用区别 【转载】

    有的观点认为,应该用 POST来创建一个资源,用PUT来更新一个资源:有的观点认为,应该用PUT来创建一个资源,用POST来更新一个资源:还有的观点认为可以用PUT和 POST中任何一个来做创建或者更 ...