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. VB6 GDI+ 入门教程[8] Bitmap魔法(1):创建

    http://vistaswx.com/blog/article/category/tutorial/page/2 VB6 GDI+ 入门教程[8] Bitmap魔法(1):创建 2009 年 9 月 ...

  2. Eclipse 配置Tomcat

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

  3. 关于智能指针boost::shared_ptr

    boost库中的智能指针shared_ptr, 功能强大, 且开销小,故受到广大coder的欢迎. 但在实际的使用过程中,笔者也发现了一些不足. 1.定制的删除器 shared_ptr除了可以使用默认 ...

  4. Lecture Notes: Macros

    原论文链接失效,特在这里保存一份 http://www.apl.jhu.edu/~hall/Lisp-Notes/Macros.html Lisp functions take Lisp values ...

  5. NOI LINUX装机记

    装了差不多一天啊!! 首先自己用虚拟光驱来运行,然后莫名其妙就炸了. 搞到最后刻了一个盘. 然后装完linux之后发现回不到windows7了. 网上找各种资料. 最后搞了个root,再启动的文件中加 ...

  6. 日期操作类--GregorianCalendar类

    GregorianCalendar--API JavaTM Platform Standard Ed. 6 GregorianCalendar类 Calendar类实现了公历日历,GregorianC ...

  7. java的System.getProperty()方法可以获取的值

    java.version Java 运行时环境版本 java.vendor Java 运行时环境供应商 java.vendor.url Java 供应商的 URL java.home Java 安装目 ...

  8. hibernate的懒加载问题

    产生原因: 当使用hibernate查询一个对象的时候,如果Session关闭,再调用该对象关联的集合或者对象的时候,会产生懒加载异常! 解决方案: 方案一: 在Session关闭之前,查询对象关联的 ...

  9. 《javascript高级程序设计》第21章 Ajax和Comet

    21.1 XMLHttpRequest 对象  The XMLHttpRequest Object 21.1.1 XHR 的用法 XHR Usage 21.1.2 HTTP 头部信息 XHR Head ...

  10. 《javascript高级程序设计》第四章 Variables,scope,and memory

    4.1 基本类型和引用类型的值 primitive and reference values 4.1.1 动态的属性 dynamic properties 4.1.2 复制变量值 copying va ...