快速入门

来源：互联网发布：foxtable怎么建数据库编辑：程序博客网时间：2024/04/26 03:01

快速入门

Smile Huang

China University of Geosciences, Wuhan

School of Computer, Network Engineering

Email：SmileHuang94 AT yahoo DOT com

一、例子：将地图放到网页中

新建一个.html文件，编辑该html文件，将下述代码加入其中，接着就可以在浏览器中看到你的劳动成果了！

<!doctype html><html lang="en">  <head>    <link rel="stylesheet" href="http://openlayers.org/en/v3.1.1/css/ol.css" type="text/css">    <style>      .map {        height: 400px;        width: 100%;      }    </style>    <script src="http://openlayers.org/en/v3.1.1/build/ol.js" type="text/javascript"></script>    <title>OpenLayers 3 example</title>  </head>  <body>    <h2>My Map</h2>    <div id="map" class="map"></div>    <script type="text/javascript">      var map = new ol.Map({        target: 'map',        layers: [          new ol.layer.Tile({            source: new ol.source.MapQuest({layer: 'sat'})          })        ],        view: new ol.View({          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),          zoom: 4        })      });    </script>  </body></html>

二、究竟发生了什么！

相信大家在做完第一步之后，在浏览器中看到了惊喜，那么这是如何做到的呢，请看下面分解。

为了让传说中的地图出现在网页上，你需要做如下三件事情：

引入OpenLayers
利用div标签创建放置地图的容器
结合JavaScript技术让地图动态呈现在你的网页上

2.1 引入OpenLayers

引入OpenLayers的代码段如下：

<span style="font-family:Courier New;"> <script src="http://openlayers.org/en/v3.1.1/build/ol.js" type="text/javascript"></script></span>

在代码（最出编辑html文件时的代码）的第一部分，我们引入了JavaScript库，由于本篇教程的需要，此处我们只是简单的指定从openlayers.org这个网站去获取整个库。在其他OpenLayers应用的开发过程中，我们将根据应用的需求来引入所需模块建立一个合乎最佳需求的库。

2.2 创建包含地图的容器

创建存放地图的容器的代码段如下所示：

  <div id="map" class="map"></div>

从代码我们可以得知，应用中的地图实际是存放在使用div标签创建的网页元素中，利用div标签我们可以通过CSS设置诸如地图的宽、高等相关属性，下面是让设置地图CSS的代码段（地图的宽与浏览器等宽，地图的高为400px）：

  <style>    .map {      height: 400px;      width: 100%;    }  </style>

2.3 引入JavScript技术

使用的JavaScript的代码段如下：

var map = new ol.Map({    target: 'map',    layers: [      new ol.layer.Tile({        source: new ol.source.MapQuest({layer: 'sat'})      })    ],    view: new ol.View({      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),      zoom: 4    })  });

通过这一段JavaScript代码，我们可以创建一个基于MapQuest的可以只有缩放的非洲东海岸地图对象，让我们来逐一讲解：
通过下面这段代码我们可以创建一个OpenLayers地图对象，由于此地图对象未做任何定义，故不会实现任何功能。

var map = new ol.Map({ ... });

下面的layers:[ ... ]数组用来定义地图中可用的图层，现在可见的第一个也是唯一的一个图层就是平铺层。

layers: [      new ol.layer.Tile({        source: new ol.source.MapQuest({layer: 'sat'})      })    ]

在OpenLayers中，图层通过包含源的类型（例如：图片、平面、矢量）来定义，这些源可以得到地图平面。点此访问可用图层源

地图对象的下一个组成部分就是视图（View），通过视图我们可以指定地图中心、分辨率和地图旋转等相关信息。定义一个视图最简单的方法就是定义一个中心点和缩放级别，值得注意的是，当zoom的值为0的时候依然表示地图是被缩小（zoom out）了。

view: new ol.View({      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),      zoom: 4    })

从上述代码你会发现在定义地图中心时我们使用的是经度/纬度坐标（EPSG：4326），由于我们使用的图层是采用球形墨卡托投影上（EPSG：3875），所以我们可以在缩放地图时重复的将地图投影在容器的空白部分。（我的理解是在对地图进行缩小之后，将非洲东海岸那一片的地图重复的投影，按x轴方向，大家可以做做实验。）

原文网址：http://openlayers.org/en/v3.1.1/doc/quickstart.html

0 0