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. 测试分页查询出数据并分文件导出[java工程]

    package cn.shiyanjun.test; import java.util.ArrayList; import java.util.List; public class ExcelTest ...

  2. hiho_1138_island_travel

    题目 二维平面上有n个点,每个点的横纵坐标均为非负整数.两个点之间的距离记为 min(abs(x1 - x2), abs(y1 - y2)),求从点1到达点n的最短路径长度. 比较容易想到使用最短路径 ...

  3. matlab中图像显示函数

    image函数是显示图像的最基本的方法.该函数还产生了图像对象的句柄,并允许对对象的属性进行设置. imagesc函数也具有image的功能,所不同的是imagesc函数还自动将输入数据比例化,以全色 ...

  4. linux笔记：网络命令ping,traceroute,ifconfig,netstat；挂载和卸载命令mount,umount

    命令名称:ping功能:测试网络连通性命令所在路径:/bin/ping用法:ping [-c] IP地址参数:-c 指定发送次数 命令名称:ifconfig功能:查看和设置网卡信息(临时设置)命令所在 ...

  5. 索引器（C# 编程指南）

    原文地址:https://msdn.microsoft.com/zh-cn/library/6x16t2tx(VS.80).aspx 索引器允许类或结构的实例按照与数组相同的方式进行索引.索引器类似于 ...

  6. jmeter 构建一个数据库测试计划

    添加用户 第一步你想做的每一个JMeter测试计划是添加一个 线程组 元素. 的线程组 告诉JMeter的用户数量你想模拟,用户应该多长时间 发送请求,他们应该发送的请求的数量. 继续添加Thread ...

  7. 《Java程序设计》实验五 实验报告

    实验五 java网络编程 实验内容 XP基础 XP核心实践 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 2. ...

  8. HTML5自学笔记[ 7 ]defer和async

    defer:给位于最前面的script标签设置defer="defer",外联js就会在onload触发之前才加载. async:给script标签设置async="as ...

  9. java下载网络图片

    import java.io.DataInputStream;import java.io.File;import java.io.FileOutputStream;import java.io.IO ...

  10. 今天同事给介绍了一个LINQ的工具，LINQPad

    今天刚知道LINQPad,详细信息参照http://www.linqpad.net/,免费下载,安装之后样子如下所示,根据向导,链接上本地数据库,比较熟悉的操作风格. 对LINQ的了解太浅,还没有更多 ...