Hello Openlayers

由于项目需要,需要用到geoserver和openlayers,再此将对openlayers的学习记录下来。学习Openlayers的第一步是要熟悉javascript语法。

1.什么是openlayers

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

2.Openlayers下载

2.1打开官网http://openlayers.org/,会看到如下界面


可以看到openlayers最新版是3.0版,点击下载,由于本人水平有限,下载了第三版不知道如何使用,又重新下了2.13.1版。

2.2 点击如下图所示.zip。下载openlayers2.13.1版


2.3 把下载到的openlayers压缩包解压缩,得到的文件夹如图所示:



2.4 复制上面图中用矩形框框住的3个文件:img theme 和openlayers.js到一个新文件夹中,这里取的是C盘下面的code文件夹。拷贝完成后code文件夹的结构如下:

3.创建地图

3.1在code文件夹中新建一个文件,此处为index.html
3.2打开index.html,编辑如下:
 <!DOCTYPE html>
<html lang='zh-cn'>
<head>
    <meta charset='utf-8' />
      <title>My First OpenLayers Map</title>
      <script type='text/javascript' src='OpenLayers.js'></script>
      <script type='text/javascript'>
          var map;
          function init() {
              map = new OpenLayers.Map('map', {});
              var wms = new OpenLayers.Layer.WMS(
                   'OpenLayers WMS',
                   'http://vmap0.tiles.osgeo.org/wms/vmap0',
                      {
                          layers: 'basic'
                      },
                      {}
                   );
              map.addLayer(wms);
              if (!map.getCenter()) {
                  map.zoomToMaxExtent();
              }
          }
      </script>
  </head>
  <body onload='init();'>
      <div id='map' style='width: 500px; height: 500px;'>
      </div>
  </body>
  </html>

4.显示地图

用浏览器打开index.html文件,看到浏览器显示如下,则说明显示成功。


转载自:https://blog.csdn.net/longshengguoji/article/details/38959957

You may also like...

退出移动版