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行是最大程度的显示地图。

----------------------------------------------------------------------------------------------------------------------------------------------------

以上是发布OpenStreetmap在线地图

如果已有离线的地图瓦片，离线瓦片可以从OpenStreetMap等地图网站下载，通过第三方开源库BruTIle可以下载

也可以通过第三方收费软件进行下载

然后配置Openlayers

参考：http://www.cnblogs.com/nianming/archive/2012/07/19/2600272.html

http://www.bigemap.com/home/help/one/id/106.html

使用OpenLayers发布地图的更多相关文章

  1. 使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务 | Publishing and Calling WMTS, Vector Tile Service Using GeoServer + OpenLayers

    Web GIS系列: 1.搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 2.使用GeoServer+QGIS发布WMTS服务 3.使 ...

  2. 用OpenLayers开发地图应用

    项目背景 最近有一个使用全球地图展示数据的项目,用地图展示数据本身没什么难度,但出于安全和保密的考虑,甲方单位要求项目不能连接外网,只能在内网使用,也就是说,我们不得不在内网中部署一个地图服务器,在这 ...

  3. geoserver发布地图服务

    1.      Geoserver启动 blog.csdn.net 2014-09-18 20:30 Geoserver是著名的开源GIS软件之一.也是项目中常用的地图服务软件.基于geoserver ...

  4. JavaWeb和WebGIS学习笔记（七）——MapGuide Open Source安装、配置以及MapGuide Maestro发布地图——超详细！目前最保姆级的MapGuide上手指南！

    JavaWeb和WebGIS学习笔记(七)--MapGuide Open Source安装.配置以及MapGuide Maestro发布地图 超详细!目前最保姆级的MapGuide上手指南! 系列链接 ...

  5. JavaWeb和WebGIS学习笔记（六）——使用ArcGIS for Server发布地图服务

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  6. JavaWeb和WebGIS学习笔记（五）——使用OpenLayers显示地图

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  7. 利用 PortableBasemapServer 发布地图服务

    前段时间需要给自己的C/S系统加一个地图,但是没有数据,于是就想到了使用网上的切片地图,但是C/S系统又不能联网,于是就想本地发布切片服务来使用. 本来想用ArcGIS Server来发布从网上下载的 ...

  8. 动态创建地图文档MXD并发布地图服务

    原文:动态创建地图文档MXD并发布地图服务 1.动态创建MXD private bool CreateMxd(string MxdPath, string MxdName) { IMapDocumen ...

  9. ArcGIS发布地图服务

    一般做完矢量图绘制工作后,生成的.mxd文件只能在ArcMap中查看,为了方便用户进行浏览,我们需要发布地图服务. 目前为止最常用的就是在ArcGIS中发布地图服务. 今天也算是在做“发布地图服务”的 ...

随机推荐

  1. 关于HiddenHttpMethodFilter

    这个类的代码比较少,所以把整个类的代码都复制过来.在注释中添加上自己的理解. public class HiddenHttpMethodFilter extends OncePerRequestFil ...

  2. bzoj2331 [SCOI2011]地板

    Description lxhgww的小名叫“小L”,这是因为他总是很喜欢L型的东西.小L家的客厅是一个的矩形,现在他想用L型的地板来铺满整个客厅,客厅里有些位置有柱子,不能铺地板.现在小L想知道,用 ...

  3. 关于浏览器被http://www.51jetso.com/劫持

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wwkaven/article/details/36373447     近期,新装了一下系统.安装软 ...

  4. v-bind:的基本用法

    1. v-bind:class(根据需求进行选择) <style> .box{ background-color: #ff0; } .textColor{ color: #000; } . ...

  5. ResourceWarning: unclosed <socket.socket fd=864, family=AddressFamily.AF_INET, type=SocketKind.SOCK_STREAM, proto=0, laddr=('10.100.x.x', 37321), raddr=('10.1.x.x', 8500)>解决办法

    将代码封装,并使用unittest调用时,返回如下警告: C:\python3.6\lib\collections\__init__.py:431: ResourceWarning: unclosed ...

  6. 微信小程序开发——列表分页上拉加载封装实现（订单列表为例，订单状态改变后刷新列表滚动位置不变）

    业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...

  7. SpringBoot 修改仓库

    SpringBoot使用aliyun仓库 maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/'}

  8. 【Node.js】新建一个NodeJS 4.X项目

    前提工作 1.安装Node.js 各种下一步就好 2.安装NPM(node package manager) 安装好Node.js之后,打开cmd,输入npm install npm -g,程序会自动 ...

  9. unittest单元测试框架之测试套件（三）

    1.测试套件(注意:测试用例先添加先执行,后添加后执行,由此组织与设定测试用例的执行顺序) addTests:添加多个测试用例 addTest:添加单个测试用例 import unittest fro ...

  10. Vue--- 一点车项目 连接数据库 数据使用

    Vue--- 一点车项目  连接数据库 数据使用 后台服务器 返回数据 处理 created 这个钩子在实例被创建之后被调用: async created(){ // 分类 catelist { le ...