快速入门

快速入门

Smile Huang

China University of Geosciences, Wuhan

School of Computer, Network Engineering

Email：SmileHuang94 AT yahoo DOT com

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

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

  
    
    
    
    
  
  
    
My Map
    

    
  

二、究竟发生了什么！

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

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

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

2.1  引入OpenLayers

引入OpenLayers的代码段如下：

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

2.2  创建包含地图的容器

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

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

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