基本概念

地图

OpenLayers 的核心组件是地图 ( ol/Map)。它被渲染到一个target容器（例如div网页上包含地图的元素）。所有地图属性都可以在构建时配置，也可以使用 setter 方法进行配置，例如setTarget().

下面的标记可用于创建一个<div>包含您的地图。

<divid="map"style="width: 100%, height: 400px"></div>

下面的脚本构建了一个在<div>上面呈现的地图，使用map元素的id 作为选择器。

import Map from'ol/Map';varmap =newMap({target:'map'});

看法

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

import View from'ol/View';map.setView(newView({center: [0,0],zoom:2}));

AView也有一个projection. 投影决定了center地图分辨率计算的坐标系和单位。如果未指定（如上述代码段中所示），则默认投影为 Spherical Mercator (EPSG:3857)，以米为地图单位。

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

来源

为了获取图层的远程数据，OpenLayers 使用ol/source/Source子类。这些可用于 OpenStreetMap 或 Bing 等免费和商业地图图块服务、WMS 或 WMTS 等 OGC 源以及 GeoJSON 或 KML 等格式的矢量数据。

import OSM from'ol/source/OSM';varosmSource = OSM();

层

层是来自source. OpenLayers 有四种基本类型的层：

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

把这一切放在一起

上面的代码片段可以组合成一个脚本来渲染一个带有单个瓦片层的地图：

import Map from'ol/Map';import View from'ol/View';import OSM from'ol/source/OSM';import TileLayer from'ol/layer/Tile';newMap({layers: [newTileLayer({source:newOSM()})],view:newView({center: [0,0],zoom:2}),target:'map'});