01 快速入门

2020-04-26 本文已影响0人无敌小菜鸟

这篇短文说明了如何在网页上插入一个简单的地图。

不过，就开发而言，我们强烈推荐将请求和它依赖的内容部绑定起来，详见创建一个OpenLayers请求说明手册。

1.在页面上放一个地图

下面是一个完整的例子：新建一个文件，将下面的代码复制进去，然后在浏览器中打开。

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
    <title>OpenLayers 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.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

2.理解地图是如何生成的

想要在页面上插入地图，需要做三件事：

引入 OpenLayers；
容纳地图的容器 div 块；
创建地图的 JS 代码。

引入OpenLayers

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>

第一部分是引入JavaScript库。在这里由于只做介绍，直接引用的OpenLayers源网站的JavaScript库。如果在开发环境，我们会创建一个仅包含应用必需组件的用户版js库。

提示： 如果OpenLayers要应用于旧版本平台例如 IE 或 Android 4.x，那么在引入OpenLayers之前，还需要一个js文件：

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>

容纳地图的 div 块

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

请求的地图放在一个 div 中，通过给这个 div 设置CSS样式，可以控制地图的宽高和边界等元素。下列的CSS代码的作用是将地图设置为400px高，与浏览器等宽：

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

创建地图的js代码

var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
  });

使用这段js代码，就生成了非洲东海岸可缩放的OSM层地图对象。接下来我们将代码拆分讲解一下：

下面这行代码的意思是创建一个OpenLayers地图对象，如果只有一行，什么也不会发生，因为没有任何层或者交互与它绑定在一起。

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

在地图对象中添加一个叫做“target”的参数，可以将地图绑定到 div 容器中，它的取值为 div 的 ID：

target: 'map'

数组 layer: [...]用来定义地图中所有可用的层，下面的第一个也是唯一一个层是一个瓦片层：

layers: [
  new ol.layer.Tile({
    source: new ol.source.OSM()
  })
]

在OpenLayers中有三种类型的layer：Image（图片）、Tile（瓦片）和Vector（矢量），每个layer必然包含一个source。source 是获取地图的协议。

Map的下一个对象是View。View可以用来指定地图的中心、分辨率以及旋转。定义View最简单的方法就是定义一个中心点（center）和一个缩放等级（zoom）。要记得缩放等级为0时代表着缩小。

view: new ol.View({
  center: ol.proj.fromLonLat([37.41, 8.82]),
  zoom: 4
})

你会发现指定的中心点是在经度/纬度坐标系（EPSG:4326）。既然我们用的唯一的layer默认使用的是球形墨托卡投影(EPSG:3857坐标)，我们可以通过转换对它们重新设定，以便能将地图在合适的坐标系中进行缩放。