OpenLayers 6 學習筆記

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

轉載請聲明：http://www.javashuo.com/article/p-gjmpkaqt-kd.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. 控件與疊加層

這部分屬於定製、擴展的功能