基本概念

地圖

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'});