OpenLayers 是一个高性能、功能丰富的库,用于在 Web
上创建交互式地图。它可以显示从任何来源加载的地图图块、矢量数据和标记。

什么是OpenLayers?

什么是OpenLayers?

OpenLayers 可运行在支持 HTML5 和 ECMAScript 5 的所有现代浏览器上,包括
Chrome、Firefox、Safari 和 Edge 。

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

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

OpenLayers 4.6.4 包含一个当在 ol.layer.Vector 上设置 renderMode:’image’
时的问题修复。详情可查阅发行说明澳门新葡萄京官网注册 ,。

下载OpenLayers

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

澳门新葡萄京官网注册 1

OpenLayers的官方网址为:

下载OpenLayers

下载地址:

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

OpenLayers的官方网址为:

  • v4.6.4-dist.zip

  • v4.6.4.zip

澳门新葡萄京官网注册 2

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

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

澳门新葡萄京官网注册 2

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

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

澳门新葡萄京官网注册 4

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

4.新建一个文件夹(我命名为code),将我们关心的文件和文件夹拷贝到新建的文件夹中,拷贝完后,新建的文件夹结构如下图:

澳门新葡萄京官网注册 4

澳门新葡萄京官网注册 6

4.新建一个文件夹(我命名为code),将我们关心的文件和文件夹拷贝到新建的文件夹中,拷贝完后,新建的文件夹结构如下图:

创建第一个地图

澳门新葡萄京官网注册 6

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

创建第一个地图

2.在index.html中,添加如下代码:

1.在code文件夹中,新建一个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>

2.在index.html中,添加如下代码:

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

   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>

澳门新葡萄京官网注册 8

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

代码讲解

澳门新葡萄京官网注册 8

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

代码讲解

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

OpenLayers的学习资源

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

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

 

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

OpenLayers的学习资源

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

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

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

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

这是一篇论文:基于OpenLayers的渤海湾信息系统的设计

另外,我在网上还发现,有OpenLayers的Visual Studio
智能感知插件,地址是:

 这是一篇论文:基于OpenLayers的渤海湾信息系统的设计

另外,我在网上还发现,有OpenLayers的Visual Studio
智能感知插件,地址是: