Hello Openlayers

本文介绍了OpenLayers的基本概念,提供了官方下载资源,并通过一个简单的示例演示了如何使用OpenLayers来创建并显示交互式Web地图。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

由于项目需要,需要用到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文件,看到浏览器显示如下,则说明显示成功。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值