OpenLayers地图基本概念（Map、View、Layer、Source四种基本类型）和背景介绍，OpenLayers官方文档翻译，OpenLayers官方中文教程，OpenLayers中文指南

前言

本文翻译自OpenLayers7官方文档，用于阐述OpenLayers地图基本概念。

Vue+OpenLayers中文教程推荐，不同于OpenLayers官方文档使用html+js原生原生教程，博主专栏包含大量vue整合案例和实际开发案例，非常适合地图开发小白快速入门。

OpenLayers6教程

1. vue整合OpenLayers6入门教程： 《Vue+OpenLayers6入门教程》
2. vue整合OpenLayers6实战中文教程，包含大量OpenLayers官方文档没有涉及到的实际开发案例： 《Vue+OpenLayers6实战进阶专栏目录》

OpenLayers7教程
3. Vue+OpenLayers7入门到实战教程

OpenLayers基本概念

Map 地图

OpenLayers的核心组件是Map（来自ol/Map模块）。它被渲染到目标容器（例如，网页上的div元素）。所有映射属性都可以在创建时配置，也可以使用setter方法进行设置，例如 setTarget()。

下面是可用于创建地图容器的<div>元素。

<div id="map" style="width: 100%; height: 400px"></div>
1

下面的脚本使用元素的 id 作为选择器构建了在上面呈现的地图。

html<div>map
1

import Map from 'ol/Map.js';
const map = new Map({target: 'map'});
1
2

View（视图）

Map不负责地图的中心点、缩放级别和投影等内容的设置和调整。相反，这些都是ol/View实例的属性。

import View from 'ol/View.js';

map.setView(new View({
  center: [0, 0],
  zoom: 2,
}));
1
2
3
4
5
6

一个 View（视图）也是一个 projection（投影）， projection（投影）是于确定 的坐标系和用来作为地图分辨率计算的单位。
如果没有指定任何 projection（投影）（如上面的代码片段所示），则地图默认的 projection（投影）为球面墨卡托 （EPSG：3857），以米作为地图单位。

这个zoom缩放选项是指定地图分辨率的快捷方法。可用的缩放级别由 maxZoom（最大缩放级别，默认值：28）、zoomFactor（缩放因子，默认值：2）和maxResolution（最大分辨率，默认值的计算方式使投影的有效性范围适合 256x256 像素切片）来确定的。
从缩放级别 0 开始，分辨率为每像素的最大分辨率单位，后续缩放级别通过将上一个缩放级别的分辨率除以缩放因子来计算，直到达到最大的缩放级别 maxZoom。

Source（源）

为了获取图层的远程数据，OpenLayers 使用ol/source/Source的子类。这些子类可用于加载xyz、OpenStreetMap或高德、Bing、Goole街景、天地图、超图等免费和商业地图切片服务，“WMS”或“WMTS”等OGC源，以及“GeoJSON”或KML等格式的矢量数据。

import OSM from 'ol/source/OSM.js';

const source = OSM();
1
2
3

Layer（图层）

图层是来自源的数据的可视化表示。OpenLayers有四种基本类型的图层：

• ol/layer/Tile -在网格中提供平铺图像的渲染源，这些网格按特定分辨率的缩放级别进行组织。
• ol/layer/Image - 渲染以任意范围和分辨率提供地图图像的源。
• ol/layer/Vector - 在客户端渲染矢量数据。
• ol/layer/VectorTile - 提供矢量瓦片的数据的渲染。

import TileLayer from 'ol/layer/Tile.js';
// ...
const layer = new TileLayer({source: source});
map.addLayer(layer);
1
2
3
4

将一切整合在一起

上述代码片段可以组合到单个脚本中，该脚本使用单个切片图层渲染地图：

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';

new Map({
  layers: [
    new TileLayer({source: new OSM()}),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
  target: 'map',
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如此，便简单的将一个OSM地图渲染到网页上，可以进行各种缩放拖动地图的操作了。

OpenLayers背景

概述

OpenLayers 是一个模块化、高性能、功能丰富的库，用于显示地图和地理空间数据并与之交互。

OpenLayers库内置支持各种商业和免费图像和矢量图块源，以及最流行的开放和专有矢量数据格式。借助 OpenLayers 的地图投影支持，数据可以位于任何投影中。

公共接口

OpenLayers 以 ol npm 包的形式提供，它提供了官方支持的 API 的所有模块。

浏览器支持

OpenLayers在所有现代浏览器上运行（全球使用率超过1%）。这包括Chrome，Firefox，Safari和Edge。对于较旧的浏览器，可能需要添加 polyfill。

该库旨在用于台式机/笔记本电脑和移动设备，并支持指针和触摸交互。

模块和命名约定

具有 CamelCase 名称的 OpenLayers 模块提供类作为默认导出，并且可能包含其他常量或函数作为命名导出：

import Map from 'ol/Map.js';
import View from 'ol/View.js';
1
2

按其父级分组的类层次结构在包的子文件夹中提供，例如 layer/
为方便起见，这些也可以作为命名导出提供，例如

import {Map, View} from 'ol';
import {Tile, Vector} from 'ol/layer.js';
1
2

除了这些重新导出的类之外，具有小写名称的模块还提供常量或函数作为命名导出：

import {getUid} from 'ol';
import {fromLonLat} from 'ol/proj.js';
1
2

— end

本文翻译分为两段，
基本概念翻译自：https://openlayers.org/doc/tutorials/concepts.html
背景翻译自：https://openlayers.org/doc/tutorials/background.html

---

Vue+OpenLayers中文教程推荐，不同于OpenLayers官方文档使用html+js原生原生教程，博主专栏包含大量vue整合案例和实际开发案例，非常适合地图开发小白快速入门。

OpenLayers6教程

1. vue整合OpenLayers6入门教程：
   《OpenLayers入门教程汇总目录，OpenLayers教程，OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers中文手册》
2. vue整合OpenLayers6实战中文教程，包含大量OpenLayers官方文档没有涉及到的实际开发案例：
   《OpenLayers实战进阶专栏目录，OpenLayers实战案例，OpenLayers6实战教程》

OpenLayers7教程
3. Vue+OpenLayers7入门到实战教程