基本概念

地圖

OpenLayers 的核心組件是地圖 ( ol/Map)。它被渲染到一個target容器（例如div網(wǎng)頁上包含地圖的元素）。所有地圖屬性都可以在構(gòu)建時配置，也可以使用 setter 方法進(jìn)行配置，例如setTarget().

下面的標(biāo)記可用于創(chuàng)建一個<div>包含您的地圖。

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

下面的腳本構(gòu)建了一個在<div>上面呈現(xiàn)的地圖，使用map元素的id 作為選擇器。

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

看法

地圖不對地圖的中心、縮放級別和投影等內(nèi)容負(fù)責(zé)。相反，這些是ol/View實例的屬性。

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

AView也有一個projection. 投影決定了center地圖分辨率計算的坐標(biāo)系和單位。如果未指定（如上述代碼段中所示），則默認(rèn)投影為 Spherical Mercator (EPSG:3857)，以米為地圖單位。

該zoom選項是一種指定地圖分辨率的便捷方式?？捎玫目s放級別由maxZoom（默認(rèn)值：28）、zoomFactor（默認(rèn)值：2）和maxResolution（默認(rèn)值的計算方式使投影的有效性范圍適合 256x256 像素圖塊）。從分辨率為maxResolution每像素單位的縮放級別 0 開始，通過將前一個縮放級別的分辨率除以 來計算后續(xù)縮放級別zoomFactor，直到maxZoom達(dá)到縮放級別。

來源

為了獲取圖層的遠(yuǎn)程數(shù)據(jù)，OpenLayers 使用ol/source/Source子類。這些可用于 OpenStreetMap 或 Bing 等免費(fèi)和商業(yè)地圖圖塊服務(wù)、WMS 或 WMTS 等 OGC 源以及 GeoJSON 或 KML 等格式的矢量數(shù)據(jù)。

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

層

層是來自source. OpenLayers 有四種基本類型的層：

• ol/layer/Tile - 渲染在網(wǎng)格中提供平鋪圖像的源，這些網(wǎng)格按特定分辨率的縮放級別進(jìn)行組織。
• ol/layer/Image - 渲染以任意范圍和分辨率提供地圖圖像的源。
• ol/layer/Vector - 在客戶端呈現(xiàn)矢量數(shù)據(jù)。
• ol/layer/VectorTile - 呈現(xiàn)作為矢量切片提供的數(shù)據(jù)。

把這一切放在一起

上面的代碼片段可以組合成一個腳本來渲染一個帶有單個瓦片層的地圖：

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