Web GIS 開發入門

作者：ELab.zhangzirui 2023-02-08 16:20:39

因為沒有一個成體系的學習大綱，所以需要一個問題作為切入點來幫助自己一步一步了解 GIS 相關知識。那么一個很容易想到的問題就出現了：地圖是如何進行點的定位和展示的呢，要知道我們生活在一個球形的天體上，而我們常使用的地圖是平面的，和球形毫無關系。

前言

最近在學習 OSM ID 編輯器的過程中，我發現之前一兩個月雖然也開始熟悉使用高德map的開發，但是自己對 web GIS 領域相關基礎知識的了解卻少的可憐。導致在閱讀源碼的過程中，常常對一些數據轉化操作或者一些函數命名感到很奇怪，因此開始了對 GIS 基礎知識的學習。

因此學習的第一步是了解坐標系系統。

坐標系

總所周知，地球不是一個標準的球體，而是一個近似的橢球體，越靠近赤道則越寬。既然是一個三維物體，那么進行坐標系定位一般來說需要 x，y，z 一個三維坐標系來定義。但是為了更好的在球面上進行定位，所以就采取了使用經緯度的方式，在 GIS 開發中，以經度、維度以及相對高度所組成的坐標系將其稱作為地理坐標系（Geographic Coordinate System，簡稱 GCS）。

而在平時使用手機地圖或者網頁地圖的時候，展現在我們面前的則是一個平面地圖。如果說此時我們需要查詢自己去某個飯店有多遠，手機會告訴我們距離多少公里或者多少米，所以我們得到兩個地點之間的距離是平面距離，使用米或者千米做單位。而此時的定位坐標系，就被稱作為投影坐標系（Projection Coordinate System，簡稱PCS）。

很顯然，我們平時使用的平面地圖，肯定是做了這樣一件事情，那就是將地理坐標系轉換成投影坐標系。但是，一個球面從直觀上是無法展開成一個連續的，沒有褶皺的平面的，因此我們需要一定的數學方法進行轉換。

其實從投影坐標系的名稱也可以看出，坐標系轉化的方法就是投影。可以想象一下，一個3D的物品被光照射之后的影子，是不是就是2D平面了。當然坐標系的轉換肯定不是隨便投影就行，為了讓投影之后的坐標系有一定的使用價值，投影的方式一般都會具備一定的規律，比如投影后距離不變，或者角度不變等。

墨卡托投影

墨卡托投影（Mercator Projection）是在1569年，當時的地理學家杰拉杜斯·墨卡托提出的一種角度不變的投影方式，又被稱作為等角正切圓柱投影。我們可以想象一下，將地球置于一個空心圓柱體中，其中地球的赤道正切于圓柱體。然后假設地心有一個燈泡，燈泡的光線能夠透過地表照射到圓柱體表面，那么地球球面上的絕大部分區域都會相應的被投影到圓柱體上。此時將圓柱體展開，以赤道的投影為橫坐標，以本初子午線的投影的縱坐標，就得到了以墨卡托投影所構成的平面坐標系。

我們可以看到該投影有以下特點：

經線、緯線分別為平行直線，并且經緯線之間互相垂直
緯度越高的地方，投影面積形變越大，而在緯度無限接近于極點的位置，面積則會無限大，因此緯度的上限和下限分別是北緯 89° 和南緯 89°。
雖然在面積上有形變，但是是各個方向上的均等擴大，所以保證了地圖方向、角度以及位置關系的正確性。

Web墨卡托

web墨卡托，也稱偽墨卡托（Pseudo Mercator Projection），屬于一種不嚴格的墨卡托投影方式，其被 Google Map 最先發明，后續又被Bing，百度， OSM 等各個網絡地圖服務商使用，因此成為了互聯網電子地圖最常見的投影方式。

其和墨卡托投影的最大區別在于，墨卡托投影是建立在地球是一個橢球體的基礎上進行投影公式計算的，而 Web 墨卡托在其計算公式上直接將橢球體變成了球體，大大簡化了投影轉化的計算方法，其計算公式為：

其中 x, y 為投影坐標系中的坐標值，為赤道半徑，為經度，為緯度。

此外，web 墨卡托投影一般默認為一個正方形。已知赤道半徑為 6378137 米，則赤道的周長則為約為40075016.68557849，所以投影坐標系中 X 軸的范圍為 [-20037508.342789244, 20037508.342789244]，則 Y 軸的范圍也為 [-20037508.342789244, 20037508.342789244]，可以通過上面公式反算出緯度被限制在了[-85.0511287， 85.0511287] 范圍內。

在日常地圖使用中，使用 web 墨卡托投影的地圖已經足夠了。但是如果有一些其他的要求，比如說要精確描述區域面積，則一般使用圓錐投影，比如阿爾伯斯投影、蘭伯特投影等，這里就不再具體展開，感興趣的可以看一下常見的地圖投影方式[1]。

EPSG

上個小節提到了地理坐標系和投影坐標系，還提到了一些投影方法。就拿墨卡托和web墨卡托來說，前者是將地球看作一個橢球體，后者將地球看作了一個球體。所以說我們并沒有一個嚴格的標準且統一的方式來表述某個點的位置。當沒有統一標準的時候，就會存在很多體系標準，而當各種體系標準變得龐大且失去統一管理的時候，人們想將不同體系之間的坐標互相轉化的話就會變得異常困難。EPSG[2] 就是來管理這些坐標體系的一個組織。

EPSG 通過 WKID 來管理不同的坐標體系，WKID 簡單理解就是 ID，每個坐標體系擁有獨一無二的ID。拿一些常用的WKID 舉例：

WGS84 （WKID = 4326）

在介紹 WGS84 之前，我們需要弄清楚一個概念：大地坐標系。大地坐標系是以參考橢球面為基準面而建立起來的坐標系，也可以簡單理解成屬于地理坐標系的一種。大地坐標系又分為參心大地坐標系和地心大地坐標系。其中參心坐標系是以橢球幾何中心為原點構建的坐標系，一般用來對局部地區大地測繪使用，而地心坐標系是以地球質心為原點構建的坐標系，一般用來對地球整體大地測繪使用。

WGS84 則屬于地心大地坐標系，是世界上第一個統一的大地坐標系，所以也被稱為世界大地坐標系，而我們常說的GPS定位系統就是依據此坐標系建立的。除了中國地區以外，很多電子地圖比如谷歌、Bing等都是用的是 WGS84。

CGCS2000（WKID = 4490）

我國在上世紀50年代和80年代分別建立了北京54和西安80參心大地坐標系，后隨著社會經濟，科學的發展，中國測繪、地震部門和科學院有關單位重新建立了中國新一代地心大地坐標系，也就是 CGCS2000，所以也被稱為2000國家大地坐標系。

和 WGS84 相比，兩者本質上可以算是一致的，只是在計算過程中采用的參數有細微的差別。這個差別映射到地圖上，也只會有 cm 級別的不同，因此如果在精度不需要嚴格到 cm 級別的應用中，兩者可以默認相容。

Web 墨卡托（WKID = 3857)

Web 墨卡托也在 EPSG 的管理范圍下，可見 EPSG 管理的坐標系不僅僅只有地理坐標系，同樣也包括投影坐標系。

其實原本 EPSG 不準備將 web 墨卡托納入 WKID，因為 web 墨卡托畢竟是采用了不嚴謹的假設，使得原本是等角投影的墨卡托變成了近似等角，從而直接影響到投影坐標的精度。但是隨著 web 墨卡托在 web 領域被廣泛使用從而名聲大噪，EPSG 也只能將其接受。

GCJ02 和 BD09

GCJ02 是中國國家測繪局所制定的坐標系統，其本質就是在 WGS84 經緯度的基礎上進行了一層加密。由于國家相關安全保密規定，我國所有對外的地圖系統都需要進行加密。所以高德以及谷歌的中國地圖都是使用GCJ02坐標系。所以如果在 GCJ02 的坐標系下直接使用 GPS 的經緯度坐標，那么就會得到一個錯誤的定位地點。

比如在手機上下載一個GPS定位軟件（部分硬件設備獲取的GPS信息是原始的GPS信息，而一般地圖軟件的定位信息都是GCJ02加密過后的），得到天安門的經緯度是 39.907375,116.391349。

但是在高德地圖上，使用該坐標點則定位到其他地方：

所以 GCJ02 坐標系在業內也常常被稱為火星坐標系。

而百度在GCJ02 的基礎上又進行了一層加密，這就是 BD09。

至于 GCJ02 的加密算法是不對外公開的，只有通過相關地圖資質的審核，有關部門才會提供相應的加密算法。而國內一些拿到資質的廠商也提供了相應的 API 對外提供，可供用戶將 WGS84的坐標轉換成 GSJ02的坐標。

拿高德API[3]舉例，WGS84的坐標點轉換成GCJ02后，得到新的坐標點116.397588975695,39.908775499132，然后拿新的坐標點在高德地圖上進行定位：

此外，嚴格意義上并沒有 GCJ02 轉化成 WGS84 的反向轉化算法。

數據服務

通過了解坐標系原理，我們知道了如何將三維的地理坐標系轉換成平面的投影坐標系。但是光有坐標系肯定是不行的，我們還是需要將對應的數據呈現在坐標系中才能有一個完整的地圖，那么就不得不去了解地圖常見的數據服務。

OGC

OGC 是一個制定空間信息和基于位置服務相關標準的國際化組織。嚴格來說，OGC 并不算是一個“官方”組織，但是由于 OGC 有著ESRI、Google、Oracle 等業界強勢企業作為其成員，同時還和 W3C、ISO、IEEE 等協會或組織結成合作伙伴關系。因此在 GIS 開發領域，絕大部分開發者或者企業都會依據 OGC 標準來提供地圖數據服務。

在地圖數據服務中最顯而易見的肯定是圖片服務，用圖片來承載一個地理信息數據，這個理所應當很好理解。所以當地理信息數據被封裝成了圖片信息并且可以根據用戶的請求而動態返回的服務就被稱作 WMS (web map service) 。

除了圖片資源以外，地圖上還會有道路信息，POI 信息等，而這些數據往往是靈活的，可編輯的，因此肯定不能通過圖片信息進行傳遞，因此就有了矢量資源。而一般地圖的矢量數據會包含空間數據和屬性數據，拿常見的 GeoJSON 格式舉例：

{ 
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [102.0, 0.5] // 空間數據
            },
            "properties": { // 屬性數據
                "name": "xx超市"，
            }
        }
    ]
}

這種提供給用戶矢量數據并且支持增刪改查的服務就被稱作 WFS(web feature service)。

在實際應用中 WMS 和 WFS 也不能夠完全勝任要求，比如我打開一張世界地圖，服務返回給我一張世界地圖的圖片，但是我想通過放大的方式來定位到我的家，那么要實現這個功能這個圖片的分辨率就會高的不可思議。這種要求顯然是不合理的，所以 OGC 在 WMS 服務端的基礎上制定了 WMTS(web map tile service) ，也就是我們常說的瓦片服務。此外常見的瓦片服務還有 TMS(tiled map service) ，但是這個服務是不是OGC創建的協議。

瓦片

不同于 WMS，瓦片服務提供的圖片是提前制定好的靜態圖片，可以通過下面的示意圖來理解瓦片。

在上面的金字塔模型中，世界地圖分成了多層級別的瓦片服務。這個層就對應著地圖的放大級別。在最上層，也就是地圖縮小到最小程度時，只提供一張圖片來展示世界的全貌。用戶如果進行放大操作提升地圖的放大級別，那么世界地圖相應的展示第二個層級的圖片，而實際上展示的地理位置區域大小沒有變化，只是原本一張圖片展示世界全貌，變成了和原本圖片同等大小的四張圖片來展示世界全貌。和原本相比，就會更加清晰一些。

同樣，用戶繼續放大，用來展示的層級所擁有的圖片數量就會越多，展示的細節就會越來越清晰。但是由于屏幕大小范圍有限，所以可以只選擇在屏幕范圍之內的圖片進行下載，這樣就避免了下載一張超大的圖片，從而減輕了服務壓力提升了體驗性能。而這種被分割的圖片，就被叫做瓦片。

拿高德地圖舉例，因為是使用的 web 墨卡托投影，所以呈現的地圖是正方形的。其瓦片排布編碼的規律如下，其中 z 為放大層級，每個瓦片大小默認為 256 * 256，第 z 層級的瓦片數量為。

高德地圖瓦片鏈接為 ??http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}??[4]，其中 z 為放大層級，x, y 為該瓦片在所在層級的編碼。

在放大層級為 3時（對于高德地圖來說，有意義的最小放大層級就是3），瓦片展示如下：

當然這種瓦片排布的規律不是通用的，不同廠商制定的瓦片服務都可能存在著一些差別，所以在使用瓦片服務的時候要注意一些。

定位渲染

在知道坐標系和地圖數據服務之后，我們其實就可以簡單的模擬一下地圖上的點是如何渲染的了。

已知初始條件

定義 DOM container 大小為 1200 * 1000
初始放大層級為 12
中心定位點為天安門，也就是 GCJ02坐標系下的 116.397588,39.908775
Web墨卡托投影正方形的邊長

計算 container 要展示出的地圖區域
因為放大層級是12，橫軸或縱軸存在的瓦片個數為
像素長度比為

container 展示的地圖面積為

中心點的投影坐標點為

container 展示的地圖區域為

所在橫軸區間 [12934389.117239695, 12980251.334210802]
所在縱軸區間 [4833585.295927367, 4871803.810069955]

計算出要展示的瓦片

瓦片編號計算公式

1.  瓦片編號區間：

    -   橫軸瓦片編號區間 [3370, 3374]
    -   縱軸瓦片編號區間 [1550, 1553]

那么屏幕可視區范圍展示的瓦片分布就應該是：

驗證

在 ID 編輯器上，將背景配置成高德瓦片，并將放大層級設定為12，中心定位到天安門，可以得到如下圖所示內容，發現屏幕內瓦片展示和我們之前手動算出來的結構保持一致。

在弄清楚地圖的基本渲染邏輯之后，其實可以對地圖的渲染進行一定程度的魔改，比如將游戲地圖嵌到世界地圖上去：

參考

【1】基于Web墨卡托投影的地圖算法研究和實現[J].計算機應用研究,2012,29(12):4793-4796.

【2】幾種互聯網地圖服務背后的解讀（WMS，WFS，WMTS，TMS）[5]

【3】參心坐標系和地心坐標系[6]

【4】墨卡托投影? ArcGIS Pro | 文檔[7]

【5】聊聊GIS中的坐標系|再版[8]

參考資料

[1]常見的地圖投影方式: https://pro.arcgis.com/zh-cn/pro-app/latest/help/mapping/properties/list-of-supported-map-projections.htm

[2]EPSG: https://epsg.io/

[3]高德API: https://lbs.amap.com/api/webservice/guide/api/convert/

[4]http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}: http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}

[5]幾種互聯網地圖服務背后的解讀（WMS，WFS，WMTS，TMS）: https://zhuanlan.zhihu.com/p/398998331

[6]參心坐標系和地心坐標系: https://www.jianshu.com/p/7bbbd86dec82

[7]墨卡托投影? ArcGIS Pro | 文檔: https://pro.arcgis.com/zh-cn/pro-app/latest/help/mapping/properties/mercator.htm

[8]聊聊GIS中的坐標系|再版: https://zhuanlan.zhihu.com/p/98839097

責任編輯：武曉燕來源： ELab團隊

Web 開發定位

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看