openlayers6【十】座標轉換 EPSG:3857和EPSG:4326區別,座標轉換詳解

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-經緯度座標-WGS84EPSG: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")
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章