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.turbolinux.org/
http://baiyinzc.com/index/?post=296 这是一篇论文：基于OpenLayers的渤海湾信息系统的设计
另外，我在网上还发现，有OpenLayers的Visual Studio 智能感知插件，地址是：http://jozefizso.github.com/openlayers/
OpenLayers介绍和第一个例子(转载)的更多相关文章
- springmvc的介绍和第一个例子
SpringMVC是Spring 框架自带的一部分. SpringMVC底层基于:Servlet Struts2底层基于:filter struts1底层基于:Servlet spring 各模块 我 ...
- Spring MVC介绍和第一个例子
1.Spring mvc概述 spring mvc是spring提供给web应用框架设计,实际上MVC框架是一个设计理念.它不仅存在java世界中而且广泛在于各类语言和开发中,包括web的前端应用.对 ...
- spring boot入门 -- 介绍和第一个例子
"越来越多的企业选择使用spring boot 开发系统,spring boot牛在什么地方?难不难学?心动不如行动,让我们一起开始学习吧!" 使用Spring boot ,可以轻 ...
- ElasticSearch 5学习(5)——第一个例子（很实用）
想要知道ElasticSearch是如何使用的,最快的方式就是通过一个简单的例子,第一个例子将会包括基本概念如索引.搜索.和聚合等,需求是关于公司管理员工的一些业务. 员工文档索引 业务首先需要存储员 ...
- Activity工作流(2)-入门安装运行第一个例子
转: Activity工作流(2)-入门安装运行第一个例子 置顶 2017年05月24日 15:58:50 li_ch_ch 阅读数:24432 版权声明:本文为博主原创文章,未经博主允许不得转载 ...
- MXNet学习～第一个例子～跑MNIST
反正基本上是给自己看的,直接贴写过注释后的代码,可能有的地方理解不对,你多担待,看到了也提出来(基本上对未来的自己说的),三层跑到了97%,毕竟是第一个例子,主要就是用来理解MXNet怎么使用. #导 ...
- 04springMVC结构，mvc模式，spring-mvc流程，spring-mvc的第一个例子，三种handlerMapping，几种控制器，springmvc基于注解的开发，文件上传，拦截器，s
1. Spring-mvc介绍 1.1市面上流行的框架 Struts2(比较多) Springmvc(比较多而且属于上升的趋势) Struts1(即将被淘汰) 其他 1.2 spring-mv ...
- IPC介绍——10个ipcs例子
IPC介绍——10个ipcs例子 semaphorearrays2010performancesystemaccess ipcs是一个uinx/linux的命令.用于报告系统的消息队列.信号量.共享内 ...
- ElasticSearch 5学习(5)——第一个例子
想要知道ElasticSearch是如何使用的,最快的方式就是通过一个简单的例子,第一个例子将会包括基本概念如索引.搜索.和聚合等,需求是关于公司管理员工的一些业务. 员工文档索引 业务首先需要存储员 ...
随机推荐
- [Java]去除html中的标签或者元素属性（正则表达式）
后台的数据库中某个字段是富文本框输入的 带有Html的标签 ,去掉标签后返回给前台 1.去掉Html 标签的代码 //过滤html标签 Pattern p_html = Pattern.compile ...
- centos的基本命令01
01:创建用户命令 useradd liulaoshi # 创建用户 passwd liulaoshi # 设置密码, 回车后会提示让你输入两次密码 1.用户列表文件:/etc/passwd/ 2.用 ...
- bzoj2938 poi病毒 AC自动机
题目传送门 思路: 要求构建一个字符串,使得这个字符串不包含给出的任意一个单词. 如果我们已经构建出了一个安全代码,放在ac自动机上跑,那么我们必定不能得到任何一个字符串,此时我们得到的fail指针必 ...
- 浅解bootstrap 下拉框插件
最近的业务需求是把后台数据渲染到前端,其中有一个是复选框数组,前端选择渲染的方式是bootstrap的下拉插件 渲染完成之后,此时会在原有select同级上面生成buton,dropdown-menu ...
- Java_方法的定义以及分类
什么叫方法? 方法也叫做函数,实现某个功能 方法分类: 系统提供的方法: 常用的系统提供的方法:如:nextInt() next() nextDouble() print println()..... ...
- 1.CSS中的定位机制
标准文档流(Normal flow) 特点: 从上到下,从左到右,输出文档内容 由块级元素和行级元素组成 块级元素: 从左到右撑满页面,独占一行 触碰到页面边缘时,会自动换行 块级标签: div.ul ...
- MySQL修改数据表
ALTER [IGNORE] table tb_name alter_spec,alter_spec......... alter_specification: ADD [COLUMN] create ...
- Jmeter调试脚本之关联
前言: Jmeter关联和loadrunner关联的区别: 1.在loadrunner中,关联函数是写在要获取变量值的页面的前面,而在就Jmeter中关联函数是要写在获取变量函数值的页面的后面 2.在 ...
- Jedis连接redis
今天与大家分享下,Jedis连接池使用.先看一段JAVA 代码: JedisPoolConfig config = new JedisPoolConfig(); con ...
- MySql的数据查询
SELECT语句是最常用的查询语句,它的使用方式有些复杂,但功能却相当强大.SELECT语句的基本语法如下: select selection_list//要查询的内容,选择哪些列 from数据表名/ ...