1. 寫在前面:
EPSG:3857即投影座標,EPSG:4326即地理座標。
如果不瞭解什麼是EPSG:3857和EPSG:4326請先看下這篇文章。openlayers6【十】EPSG:3857和EPSG:4326區別詳解
ol.proj
類主要實現以下功能,說通俗點就是實現座標轉換的類。
- 轉換爲指定的座標系座標
- 座標系間座標互相轉換
- 轉換Extent爲指定座標系
2. ol.proj類常用方法
下面可以看下這個類裏面都有哪些方法(紅色方法爲常用的方法,方法參數沒有寫,具體可以查看)。
-
addCoordinateTransforms 註冊座標轉換功能以在源投影和目標投影之間轉換座標。正向和反向函數轉換座標對;該函數將這些轉換爲內部使用的函數,這些函數還可以處理範圍和座標數組。
-
addEquivalentProjections 註冊不改變座標的變換函數。這些允許在具有相同含義的投影之間進行轉換。
-
addProjection 將Projection對象添加到可以通過其代碼查找的受支持投影列表。
-
equivalent 檢查兩個投影是否相同,即一個投影中的每個座標確實代表與另一個投影中的相同座標相同的地理點。
-
get 爲指定的代碼獲取一個Projection對象。
-
getPointResolution
-
getTransform 給定類似投影的對象,搜索轉換函數以將座標數組從源投影轉換爲目標投影。
-
toLonLat 將座標轉換爲經度/緯度。
-
transformExtent 將範圍從源投影轉換爲目標投影。這將返回一個新範圍(並且不會修改原始範圍)。
-
fromLonLat
將座標從經度/緯度轉換爲其他投影。 -
transform
將座標從源投影轉換爲目標投影。這將返回一個新座標(並且不會修改原始座標)。
下面主要講
transform
這個方法
3. EPSG:4326和EPSG:3857座標互相轉換
使用 transform
轉換。ol.proj.transform(coordinate, source, destination)
將座標從源投影轉換爲目標投影。這將返回一個新的座標(並且不會修改原始座標)。
vue 頁面引入
import { transform, get } from "ol/proj";
1:將地理座標轉爲投影座標
//座標,源投影,目標投影
transform(coordinate, 'EPSG:4326', 'EPSG:3857')
2:將投影座標轉爲地理座標
//座標,源投影,目標投影
transform(coordinate, 'EPSG:3857', 'EPSG:4326')
如果是 geoJSON數據格式轉換,則MultiPolygon
和Polygon
方法可以直接點出transform
方法直接轉換。
geometry: new MultiPolygon(
lineData.geometry.coordinates
).transform("EPSG:4326", "EPSG:3857")
//或者
geometry: new Polygon(
lineData.geometry.coordinates
).transform("EPSG:4326", "EPSG:3857")