1.简介

欢迎来到OpenLayers工作台，这篇材料旨在为您全面地介绍OpenLayers缘何成为网页地图绘制的一个选择。

安装

首先要从最新的工作台下载最新版本的 openlayers-workshop-en.zip 压缩包，此外你还需要安装Node v8或更高版本来运行工作台的开发服务器。
解压后，切换到openlayers-workshop-en目录下，使用如下命令安装一些额外的依赖项：

npm install

现在你可以准备启动工作台开发服务器了，这除了提供了OpenLayers库绑定的模块之外，还包括了讲解文档。

npm start

这将启动一个开发服务器，在这里你可以阅读工讲解的文档，并通过练习来完成练习。你应该可以通过在http://localhost:3000/，看到弹出的警报来确认是否正常运行，您可以在http://localhost:3000/doc/，阅读讲解文件。

概述

工作台是以一组模块的形式展现的，在每个模块中，你都可以通过一些设定好的任务为模块实现特定的目标，每个模块都是在以前模块中学到的知识的基础上，迭代建立起你的知识库。
工作台包含以下模块：

基础知识：学习如何在页面中添加地图；
矢量数据：用矢量数据工作；
移动地图和传感器：带有GPS和指南针的移动地图；
WebGL渲染：用WebGL渲染陨石撞击地点；
矢量瓦片：使用矢量瓦片构建漂亮的地图；
栅格操作：用栅格源操纵像素；
部署：为产品构建应用。

2.基础知识

首先确保你已经按照安装步骤安装了支持，并且开发服务器正常运行。
既然我们已经搭建了开发环境，那么让我们以创建一个带有OpenLayers地图的网页为开始，同时理解一下代码。
在OpenLayers中，每一张地图是一个layer的集合在网页上渲染的结果。如果想构建地图，需要一些HTML标记生成展示地图的容器（例如 div 元素），再给容器添加一些尺寸样式，和初始化地图的代码。
OpenLayers支持不同种类的layer：

瓦片层：用于瓦片栅格集合；
图像层：用于静态图像或根据地图范围提供的图片；
矢量层：用于地图当前范围的静态文件的矢量数据；
矢量瓦片层：用于矢量瓦片集合。
除了layer和view，地图还能通过一系列的控件（例如地图顶部的UI元素）和交互（例如对地图上的触摸或指针手势做出反应的组件）来进行配置。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenLayers</title>
    <style>
      html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="map-container"></div>
  </body>
</html>

既然在这个请求中不需要包含任何script标签，我们的webpack设置可以解决这个问题。我们的<style>让地图容器充满了整个页面，div容器和 div 的 id “map-container” 作为地图的target。

请求

为了运行OpenLayers，我们从npm中安装OL包。这已经在上面的 npm install 步骤中完成了。如果你是在一个新的应用程序上从头开始，你需要在终端运行npm install ol@beta这行代码。
作为应用程序的入口，我们创建一个main.js文件，并同样保存在车间目录的根目录下。

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';

new Map({
  target: 'map-container',
  layers: [
    new TileLayer({
      source: new XYZSource({
        url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
      })
    })
  ],
  view: new View({
    center: fromLonLat([0, 0]),
    zoom: 2
  })
});

在顶部，我们从ol 包引入了需要的模块。注意‘ol/ol.css’的引入，是为了添加OpenLayers规定的基础UI组件。一切准备妥当，接下来开始创建地图，target 属性指向容器div标签。我们使用瓦片层（TileLayer）和 XYZSource。最后，view 定义了初始缩放等级，和地图在视觉投影中的中心。如果想提供地理坐标系，我们使用ol/proj模块中的fromLonLat辅助函数。