1. 寫在前面
在openlayers 6【二】Map地圖詳解,初始化一個map地圖 這篇文章中,其實已經涉及到了這一點,就是爲什麼這裏我們要把中心點的座標用 fromLonLat()
方法進行包裹。fromLonLat() 方法是繼承自
ol.proj
這個類。
import { fromLonLat } from "ol/proj";
在 openlayers 中創建map時候會有個view 屬性,該屬性下面會存在一個center
屬性。這個屬性就是設置中心位置的座標。如果不設置就沒有中心,也毫無意義。projection
屬性指定座標系的類型。
new View({
projection:'EPSG:3857',//座標系類型
center: fromLonLat([104.912777, 34.730746]), //地圖中心座標
});
更多訪問:https://openlayers.org/en/latest/apidoc/module-ol_proj.html
2. 什麼是EPSG:3857座標系
在openlayers 中默認的座標就是google的摩卡託座標
,也就是我們經常看到的 EPSG:3857
座標系。
EPSG:3857 的數據一般是這種的。[12914838.35,4814529.9]
,看上去相對數值較大。
3. 什麼是EPSG:4326 座標系
4326 WGS-84:是國際標準,GPS座標(Google Earth使用、或者GPS模塊)
EPSG:4326 的數據一般是這種的。[22.37,114.05]
。
所以我們常常看到和用到的座標系數據
往往不是墨卡託座標,而是EPSG:4326
座標系下的座標數據。因爲是常見的座標。(這裏說的是用到的數據是4326,不是說座標系類型就要用的4326座標系
)這裏有點繞,往後看慢慢就明白了。
3.1 百度使用的是EPSG:4326座標系數據
3.2 還有第三方 阿里 datav geoJSON下的座標數據也是EPSG:4326的座標,如
4. EPSG:4326和EPSG:3857區別
結合前面所說的內容,往下看。
3.1 首先看下用EPSG:4326座標類型去渲染的數據
因爲使用的
projection
是"EPSG:4326"
類型,可以看到center
中的數據格式 也是"EPSG:4326"
的數值格式。所以沒有用fromLonLat() 方法
進行轉換。
let view = new View({
projection: "EPSG:4326", //使用這個座標系
center: [104.912777, 34.730746], //地圖中心座標
zoom: 4.5 //縮放級別
});
3.2 看下用EPSG:3857座標類型去渲染的數據
前面說了默認 是 goole的 摩卡託
EPSG:3857
座標系,所以我們可以不寫。但是我們用到的center
數據值格式 是EPSG:4326
格式(前面也說了是常見的數據源),所以我們需要使用fromLonLat()
方法把EPSG:4326
格式數據轉換爲EPSG:3857
數據格式
let view = new View({
// projection: "EPSG:3857", //使用這個座標系,默認爲 3857,可以不寫
center: fromLonLat([104.912777, 34.730746]), // 數據格式4326轉爲3857
zoom: 4.5 //縮放級別
});
對比下上面的兩種座標系渲染出來的map,可以明顯的看到 EPSG:4326
感覺map 地圖被上下壓縮過一樣。而 EPSG:3857
座標系就很正常。這是因爲他們的投影
不同造成的。
所以總結下:在實際開發中,因爲map源數據大部分都是EPSG:4326的數據源格式的數據,但是使用EPSG:4326的座標系地圖會出現被壓縮的投影。所以我們都是採用 EPSG:3857的座標系類型,把數據源轉換位 EPSG:3857的數據源即可。
5. EPSG:4326和EPSG:3857座標轉換
上面提到了 ol.proj
這個類。說通俗點就是 主要實現的功能就是座標轉換的類。
下面可以看下這個類裏面都有哪些方法(紅色方法爲常用的方法,方法參數沒有寫,具體可以查看)。
- addCoordinateTransforms 註冊座標轉換功能以在源投影和目標投影之間轉換座標。正向和反向函數轉換座標對;該函數將這些轉換爲內部使用的函數,這些函數還可以處理範圍和座標數組。
- addEquivalentProjections 註冊不改變座標的變換函數。這些允許在具有相同含義的投影之間進行轉換。
- addProjection 將Projection對象添加到可以通過其代碼查找的受支持投影列表。
- equivalent 檢查兩個投影是否相同,即一個投影中的每個座標確實代表與另一個投影中的相同座標相同的地理點。
fromLonLat
將座標從經度/緯度轉換爲其他投影。- get 爲指定的代碼獲取一個Projection對象。
- getPointResolution
- getTransform 給定類似投影的對象,搜索轉換函數以將座標數組從源投影轉換爲目標投影。
- toLonLat 將座標轉換爲經度/緯度。
transform
將座標從源投影轉換爲目標投影。這將返回一個新座標(並且不會修改原始座標)。- transformExtent 將範圍從源投影轉換爲目標投影。這將返回一個新範圍(並且不會修改原始範圍)。
5.1 fromLonLat 方法:第一個參數是座標,第二個是投影類型,默認EPSG:3857
import { fromLonLat } from "ol/proj";
fromLonLat([104.912777, 34.730746])
5.2 transform 方法
‘EPSG:4326’-經緯度座標-WGS84
‘EPSG:3857’- xy座標-web墨卡託
1.var center =[116.35,39.9];//地圖中心點-經緯度座標
//經緯度轉至xy
center = transform(center ,‘EPSG:4326’, ‘EPSG:3857’ );
//反過來
2. var center =[12914838.35,4814529.9];//地圖中心點-xy座標
//經緯度轉至經緯度
center = transform(center , ‘EPSG:3857’ ,‘EPSG:4326’);
// ol3默認的座標系爲3857,即在創建ol.map的時候,若不指定projection,則默認爲EPSG:3857
如果是 geoJSON數據格式轉換。
geometry: new MultiPolygon(
lineData.geometry.coordinates
).transform("EPSG:4326", "EPSG:3857")