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元素）和交互（例如对地图上的触摸或指针手势做出反应的组件）来进行配置。
标签
首先，我们创建一个 index.html 文件在工作台的根目录中：
<!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辅助函数。
查看地图
现在可以测试我们的请求了，用浏览器打开刚才创建地图的本地文件。它应该长这样：
世界地图
拓展阅读
在材料的最后一章，我们将学习如何生成一个由用于部署的应用程序创建的产品。
对于你自己的请求，我们推荐一开始多看看示例。
关于OpenLayers所有的类和函数，可参考API文档。
网友评论