OpenLayers 6 學習筆記

根據騰訊視訊老胡的案例教程總結而來。

這個是真的學習筆記！不是教程

轉載請聲明：https://www.cnblogs.com/onsummer/p/12159366.html

基于openlayers 6.x

api不太好查，就基于騰訊課堂老胡的課做記錄。

openlayers與arcgis jsapi最大的不同，喜歡用setXXX/getXXX這種非常具有“java/C++”風格的封裝方法來封裝對象的屬性，arcgis jsapi喜歡用類似于C#.NET一樣的屬性通路；構造時則與arcgis jsapi一樣。

ol支援非常複雜的坐标系（通過proj4支援），僅支援2d，支援使用npm&webpack進行包管理，系原生sdk（arcgis jsapi基于dojo封裝），ol5/6支援es6文法。

ol支援二維資料格式很多，可以是ogc規範的網絡GIS資料服務，可以是獨立的資料檔案等；ol支援空間分析擴充，例如d3/turf/jsts。

1. 一組概念 map&view

與arcgis jsapi不同，ol的map對象占據了非常高的位置

[ol.Map]子產品

• 負責資料管理（layers屬性，又叫圖層管理）
• 負責資料渲染（render，并由target屬性綁定dom元素）
• 負責處理互動和觸發事件
• 負責管理控件（controls屬性）
• 負責管理疊加層（overlay屬性）

在ol5中，當Map子產品不足以支撐海量資料時，需要用WebGLMap子產品來加速。在ol6裡預設使用WebGL，不存在WebGLMap子產品。

[ol.View]子產品

視圖的意思，負責管理頁面端的視圖參數：

• 縮放等級（zoom屬性）
• 坐标系（projection屬性）
• 中心點（center屬性）
• 旋轉角度（rotation屬性）
• 分辨率
• 範圍框
• ...

2. 資料

ol的資料由layer管理、加載。

layer（圖層）是資料的容器，它負責把别處弄來的資料源（source）“翻譯”成map能渲染的東西。

[ol.layer]子產品

• 承載并解析資料源（source屬性）
• 管理圖層樣式（styles屬性）
• 管理圖層屬性（疊加順序/透明度）
• （補充中）...

常見圖層

• ol.layer.Tile
• ol.layer.Vector
• ol.layer.GeoJson
• ...（補充中）

常見資料源

• ol.source.OSM

3. 樣式與制圖

有了資料，當然還要給資料加點嫁妝。由第2節得知，style（樣式）由圖層管理。

格網、導出pdf也是制圖的一部分

4. 前端互動

包括ol.interaction這個互動子產品對資料進行互動，也包括前端互動的效果（跳轉、限制等）

5. 坐标系轉換

所有的坐标系概念、定義有關的類均位于ol.proj子產品下。

其中，ol.proj.Projection類代表坐标系統本身的定義，通常使用ProjectionLike字元串來表示。ProjectionLike的意思是類似"EPSG:XXXX"的字元串，EPSG這個專有詞必須大寫，XXXX代表的是坐标系的WKID。

[ol.proj]子產品

主要提供坐标系的轉換等操作，預設是4326和3857的轉換。

• proj.addCoordinateTransforms()：添加地理轉換方法
• proj.fromLonLat()：将經緯度坐标轉換到目标坐标系的坐标（預設4326到3857）
• proj.get()：根據給定ProjectionLike字元串擷取Projection對象
• proj.getTransform()：擷取地理轉換方法
• proj.toLonLat()：和fromLonLat是反運算
• proj.transform()：轉換坐标值，根據給定的原坐标系和目标坐标系，有可能需要地理轉換
• proj.transformExtent()：轉換矩形邊界框，參數同transform

[ol.proj.proj4]子產品

需要引入proj4.js庫，通過調用其register方法為頁面注冊一個ol本身沒有的坐标系。

将proj4全局變量傳遞給register()方法後，ol即擷取一個自定義坐标系。proj4全局變量通過defs()方法注冊一個坐标系。

6. 細品矢量資料

可以從各種手段擷取第三和第四層資料，及要素、要素對應的幾何與屬性資料。

7. 進階繪圖與性能優化

這裡肯定有WebGL和canvas，但是我不太會也不太擅長。

8. 控件與疊加層

這部分屬于定制、擴充的功能