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是如何使用的,最快的方式就是通过一个简单的例子,第一个例子将会包括基本概念如索引.搜索.和聚合等,需求是关于公司管理员工的一些业务. 员工文档索引 业务首先需要存储员 ...
随机推荐
- C#之集合
数组(http://www.cnblogs.com/afei-24/p/6738128.html)的大小是固定的.如果元素的个数是动态的,就应使用集合类. 列表(http://www.cnblogs. ...
- 各版本JDK官方下载地址
https://www.oracle.com/technetwork/java/archive-139210.html linux下JDK下载方法wget --no-check-certificate ...
- LoadRunner性能测试结果分析（转载）
性能测试的需求指标:本次测试的要求是验证在30分钟内完成2000次用户登录系统,然后进行考勤业务,最后退出,在业务操作过程中页面的响应时间不超过3秒,并且服务器的CPU使用率.内存使用率分别不超过75 ...
- jenkins+Publish Over SSH 提示：Transferred 0 file(s)
之前公司用jekins来进行自动化发布,现在公司因没有运维,所以自己学习.并搭建了一个jenkins的环境来进行项目自动化部署. 不料在最后连接ssh后部署时,一直提示Transferred 0 fi ...
- 食品生鲜调料代理分销拼团商城微信小程序
食品生鲜调料代理分销拼团商城微信小程序 现在小程序越来越火爆了,一种新的分销拼团模式出现了.一起来分享一下吧 调料商城是一家是专业从事各种调料生产和网上调料商品销售平台,是藤椒油.花椒油.香油.火锅油 ...
- selenium+Python（文件上传)
文件上传操作也比较常见功能之一,上传功能没有用到新有方法或函数,上传过程一般要打开一个本地窗口,从窗口选择本地文件添加.所以,一般会卡在如何操作本地窗口添加上传文件只要定位上传按钮,通send_key ...
- 转：JVM系列三:JVM参数设置、分析
转自:http://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html 不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断 ...
- Python读取文件编码及内容
Python读取文件编码及内容 最近做一个项目,需要读取文件内容,但是文件的编码方式有可能都不一样.有的使用GBK,有的使用UTF8.所以在不正确读取的时候会出现如下错误: UnicodeDecode ...
- WPF的布局-Grid(表格布局)
1. Grid布局就是表格布局 如下图: 2. 使用方法 2.1. 先生成适量的行和列,代码如下: <Grid><!--使用Grid控件--> <Grid.ColumnD ...
- MySQL的优化(大纲)
参考:http://www.cnblogs.com/villion/archive/2009/07/23/1893765.html#3031899 MySQL的优化,主要可以考虑以下四方面: 1.数据 ...