什么是OpenLayers?

作者：田念明
出处：http://www.cnblogs.com/nianming/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

OpenLayers是用于制作交互式Web地图的开源客户端JavaScript类库，制作的地图几乎可以在所有的浏览器中查看。因为是客户端类库，它不需要特殊的服务器端软件或配置，甚至不用下载任何东西就可以使用它。OpenLayers最初由Metacarta开发，现在它已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架。

下载OpenLayers

OpenLayers的官方网址为：http://openlayers.org/

1.打开官网，可以看到目前OpenLayers的最新版本是2.12，直接点击.zip下载。

2.将下载的.zip文件解压到OpenLayers-2.12中。

3.打开OpenLayers-2.12文件夹，会看到很多的文件夹和文件，但是我们只关心一个文件：OpenLayers.js和两个文件夹：/img和/theme。

4.新建一个文件夹（我命名为code），将我们关心的文件和文件夹拷贝到新建的文件夹中，拷贝完后，新建的文件夹结构如下图：

创建第一个地图

1.在code文件夹中，新建一个index.html文件。

2.在index.html中，添加如下代码：

   1:  <!DOCTYPE html>
   2:  <html lang='zh-cn'>
   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:          var map;
   9:          function init() {
  10:              map = new OpenLayers.Map('map', {});
  11:              var wms = new OpenLayers.Layer.WMS(
  12:                   'OpenLayers WMS',
  13:                   'http://vmap0.tiles.osgeo.org/wms/vmap0',
  14:                      {
  15:                          layers: 'basic'
  16:                      },
  17:                      {}
  18:                   );
  19:              map.addLayer(wms);
  20:              if (!map.getCenter()) {
  21:                  map.zoomToMaxExtent();
  22:              }
  23:          }
  24:      </script>
  25:  </head>
  26:  <body onload='init();'>
  27:      <div id='map' style='width: 500px; height: 500px;'>
  28:      </div>
  29:  </body>
  30:  </html>

3.在浏览器中打开，会看到如下图所示的地图：

代码讲解

1.第5行，包含进来OpenLayers的库OpenLayers.js。

2.第27~28行，创建一个宽和高都为500px的div用来显示地图。

3.第8行，定义一个全局变量map。

4.第10行，从OpenLayers.Map类创建一个地图(map)对象， new OpenLayers.Map('map', {});中的‘map’是用于显示地图的div的id。

5.第11行，从Layer类的子类WMS创建一个层(layer)对象。注意：在OpenLayers中，每个地图至少有一个层。

6.第12行，传入的第一个参数，'OpenLayers WMS'是层的名称。

7.第13行，第二个参数，Url是WMS服务地址。

8.第14~16行，第三个参数，传入的是一个匿名对象。

9.第19行是将层加到地图上。

10.第20行是判断是否已经有中心点。

11.第21行是最大程度的显示地图。

上面提到的，在后面的文章中，会详细讲解。

OpenLayers的学习资源

1.首先是OpenLayers的官网：http://openlayers.org/,在这里可以找到API文档以及其他很多有帮助的教程。

2.推荐一本书：OpenLayers 2.10 Beginners Guide，可以从谷歌上搜索到，这里就不提供下载地址了。我读的就是这本书，随书源代码地址：http://github.com/openlayers/openlayers

3.下面在提供几个网址：

http://openlayers.org/blog/

http://openlayers.turbolinux.org/

http://baiyinzc.com/index/?post=296 这是一篇论文：基于OpenLayers的渤海湾信息系统的设计

另外，我在网上还发现，有OpenLayers的Visual Studio 智能感知插件，地址是：http://jozefizso.github.com/openlayers/

 

OpenLayers介绍和第一个例子(转载)的更多相关文章

  1. springmvc的介绍和第一个例子

    SpringMVC是Spring 框架自带的一部分. SpringMVC底层基于:Servlet Struts2底层基于:filter struts1底层基于:Servlet spring 各模块 我 ...

  2. Spring MVC介绍和第一个例子

    1.Spring mvc概述 spring mvc是spring提供给web应用框架设计,实际上MVC框架是一个设计理念.它不仅存在java世界中而且广泛在于各类语言和开发中,包括web的前端应用.对 ...

  3. spring boot入门 -- 介绍和第一个例子

    "越来越多的企业选择使用spring boot 开发系统,spring boot牛在什么地方?难不难学?心动不如行动,让我们一起开始学习吧!" 使用Spring boot ,可以轻 ...

  4. ElasticSearch 5学习(5)——第一个例子（很实用）

    想要知道ElasticSearch是如何使用的,最快的方式就是通过一个简单的例子,第一个例子将会包括基本概念如索引.搜索.和聚合等,需求是关于公司管理员工的一些业务. 员工文档索引 业务首先需要存储员 ...

  5. Activity工作流(2)-入门安装运行第一个例子

    转: Activity工作流(2)-入门安装运行第一个例子 置顶 2017年05月24日 15:58:50 li_ch_ch 阅读数:24432   版权声明:本文为博主原创文章,未经博主允许不得转载 ...

  6. MXNet学习～第一个例子～跑MNIST

    反正基本上是给自己看的,直接贴写过注释后的代码,可能有的地方理解不对,你多担待,看到了也提出来(基本上对未来的自己说的),三层跑到了97%,毕竟是第一个例子,主要就是用来理解MXNet怎么使用. #导 ...

  7. 04springMVC结构，mvc模式，spring-mvc流程，spring-mvc的第一个例子，三种handlerMapping，几种控制器，springmvc基于注解的开发，文件上传，拦截器，s

     1. Spring-mvc介绍 1.1市面上流行的框架 Struts2(比较多) Springmvc(比较多而且属于上升的趋势) Struts1(即将被淘汰) 其他 1.2  spring-mv ...

  8. IPC介绍——10个ipcs例子

    IPC介绍——10个ipcs例子 semaphorearrays2010performancesystemaccess ipcs是一个uinx/linux的命令.用于报告系统的消息队列.信号量.共享内 ...

  9. ElasticSearch 5学习(5)——第一个例子

    想要知道ElasticSearch是如何使用的,最快的方式就是通过一个简单的例子,第一个例子将会包括基本概念如索引.搜索.和聚合等,需求是关于公司管理员工的一些业务. 员工文档索引 业务首先需要存储员 ...

随机推荐

  1. Go语言字符串

    Go语言的字符串是一个用UTF-8编码的变宽字符序列,它的每一个字符都用一个或多个字节表示 . 在Go语言中,没有字符类型,字符类型是rune类型,rune是int32的别称.可使用 []byte() ...

  2. Python——付费/版权歌曲下载

    很多歌曲需要版权或者付费才能收听 正确食用方法: 1.找到歌曲编号 2.输入编号并点击下载歌曲 # coding:utf8 # author:Jery # datetime:2019/4/13 23: ...

  3. WCF系列教程之WCF消息交换模式之单项模式

    1.使用WCF单项模式须知 (1).WCF服务端接受客户端的请求,但是不会对客户端进行回复 (2).使用单项模式的服务端接口,不能包含ref或者out类型的参数,至于为什么,请参考C# ref与out ...

  4. JS支持正则表达式的 String 对象的方法

    注意:本文中所有方法的 RegExp 类型的参数,其实都支持传入 String 类型的参数,JS会直接进行字符串匹配. (相当于用一个简单的非全局正则表达式进行匹配,但字符串并没有转换成 RegExp ...

  5. mysql linux下表名忽略大小写注意事项

    在Unix中使用lower_case_tables_name=0,在Windows中使用lower_case_tables_name=2.这样了可以保留数据库名和表名的大小写.不利之处是必须确保在Wi ...

  6. The Add-in 'VMDebugger' failed to load or caused an exception.....的解决办法

    异常如图: 解决办法: (把VS的设置导出来,做出相应修改后,再导入,问题就可以解决了) 1. 在Visual Studio中选择 Tools --> Import and Export Set ...

  7. java中的各种命令参数

    java中有很多命令参数,这些命令参数有些是控制jvm行为的,有的则是供应用程序使用.我所了解的参数主要有三种,现在说一说这三种类型的参数. (1)命令行参数. 命令行参数就是类似与c语言的命令行参数 ...

  8. linux下MySQL停止和重启

    一.启动方式1.使用linux命令service 启动:service mysqld start2.使用 mysqld 脚本启动:/etc/inint.d/mysqld start3.使用 safe_ ...

  9. Java入门系列-17-多态

    这篇文章贯穿游戏中的一些功能带你掌握多态的使用 为什么要使用多态 在一款对战类游戏中(如有雷同纯属巧合),有两个不同的法师英雄:小乔.妲己. 两个法师英雄的都有攻击的方法,小乔的攻击伤害为10,消耗魔 ...

  10. [转]浅谈 .NET Framework 与 .NET Core 的区别与联系

    本文转自:http://www.cnblogs.com/huchaoheng/p/6295688.html 2017到了,咱们学点啥啊,要想知道学点啥,先弄清.NET Framework 与 .NET ...