OpenLayers介绍和第一个例子(转载)

什么是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/

时间: 2024-08-05 07:06:16

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

IPC介绍——10个ipcs例子

IPC介绍——10个ipcs例子 semaphorearrays2010performancesystemaccess ipcs是一个uinx/linux的命令.用于报告系统的消息队列.信号量.共享内存等 1.列出所有的ipcs参数: -a 他是默认选项及ipcs等效于ipcs -a [[email protected] ~]# ipcs -a ------ Shared Memory Segments -------- key shmid owner perms bytes nattch st

上课笔记_Ajax框架,DWR介绍,应用,例子

使用Ajax框架 1. 简化JavaScript的开发难度 2. 解决浏览器的兼容性问题 3. 简化开发流程 常用Ajax框架 Prototype 一个纯粹的JavaScript函数库,对Ajax提供良好支持 jQuery 1.非常优秀的JavaScript库,对Ajax提供了良好的支持 2.与Prototype设计思想不同的是在使用jQuery之后,开发者操作的不再是DOM对象而是jQuery对象 DWR 1.        非常专业的Java Ajax框架 2.        通过DWR框架

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

 1. Spring-mvc介绍 1.1市面上流行的框架 Struts2(比较多) Springmvc(比较多而且属于上升的趋势) Struts1(即将被淘汰) 其他 1.2  spring-mvc结构 DispatcherServlet:中央控制器,把请求给转发到具体的控制类 Controller:具体处理请求的控制器(配置文件方式需要配置,注解方式不用配置) handlerMapping:映射处理器,负责映射中央处理器转发给controller时的映射策略 ModelAndView:服务

[翻译] iOS开发工具的介绍(第一部分)

IOS DEVELOPMENT TIPS & TRICKS - PART I http://blog.trifork.com/2013/12/19/ios-development-tips-tricks-part-i/ As you might know, I am very fond of developing apps for the iOS platform. I started back in mid-2009 by trying to create an app for the Dut

1jdbc简介+第一个例子

第一章 简介 JDBC(Java Data Base Connectivity的缩写,中文:java数据库互连),由一些接口和类构成的API. J2SE的一部分,由java.sql(1.0),  javax.sql(2.0里的新特性)包组成. 1996,SUN提出为java程序开发人员访问各种数据库提供了统一的编程接口,可以屏蔽底层数据库的不同. 相关概念: ODBC:Open Datebase Connectivity,开放数据库互连 C和关系型数据库交互的一种方式,微软提出的. Driver

emberjs学习一(环境和第一个例子)

code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent; } code, pre tt { background-color: transparent; border: none; } --> emberjs学习一(环境和第一个例子) 博客:http://www.cnblogs.com/xiangbing/p/emberjs-test.html 案例:http://www.love

Qt之QCustomPlot绘图(一)配置和第一个例子

最近一个用Qt开发的项目需要绘制坐标曲线,我在老师的指点下使用了QCustomPlot这个插件,使用方法简单,功能还算不错. 可是在网上找了很多资料和博文都只是将官方提供的例子演示一遍,没有系统全面的学习资料,所以我决定把自己在探索过程中获得的一些开发实例和经验分享出来,与大家共同学习交流,请各位朋友多多指教. 一.QCustomPlot的安装 官方下载地址:http://www.qcustomplot.com/index.php/download 推荐下载第一个链接,里面有很多官方给的例子可以

Linux 设备驱动的第一个例子 。

Hello World Linux 设备驱动的第一个例子 . 一. 源程序( hello.c )   #include <linux/init.h> #include <linux/module.h> MODULE_LICENSE("Dual BSD/GPL"); static int hello_init(void) { printk(KERN_ALERT "Hello, world/n"); return 0; } static void

hibernate第一个例子-保存对象

3.hibernate第一个例子-保存对象 使用hibernate框架需要导入的jar包: antlr-2.7.6 backport-util-concurrent c3p0-0.9.1 commons-collections-3.1    apache集合帮助的包 commons-logging-1.1.1日志 dom4j-1.6.1解析XML ehcache-1.5.0缓存框架 hibernate3hibernate核心包 javassist-3.9.0.GA代理模式工具包,解决懒加载问题