web編程基礎課后題答案 Web編程基礎實驗報告 _web編程基礎課后題答案

文章插圖

文章插圖
前工作中有不少涉及到地圖的項目，我參加了幾次技術評審，前端伙伴們在 WebGIS 方面的知識儲備稍有不足，這次分享的主要目的是科普一些在前端領域比較常用的 WebGIS 知識。另外，我之前的工作中積攢了一些從零開始搭建 WebGL 地圖引擎的微薄經驗，雖然最終遺憾沒有上線，但在其中學到的一些WebGL知識還是值得分享一下。WebGL 可以說是前端可視化技術領域難度最大的一項圖形編程技術，所以今天就結合 WebGIS 這個話題順帶分享一些 WebGL 的相關知識，不會太深入，很細節的技術點在后續文章里再講解。
一 WebGIS 常用概念
在前端領域需要關注的 WebGIS 知識最主要的是搞清楚電子地圖中的各種坐標系，其次需要對路網有一些基本的認知，包含路網的特征以及尋路算法的復雜度量級，其中對算法復雜度的了解不用精確到數字，只需要有一個大致的概念即可。

路網尋址是一套非常復雜的算法，除了路網本身的有向圖特征以外，還需要將路況、天氣甚至民生、政治等因素考慮在內。這是一項單獨的研究課題，前端研發不需要關注太細節的東西。

1.1 坐標系
我們日常接觸的地理坐標最多的是經緯度坐標，地球是一個橢球體，經緯度是球面坐標系。但是我們平時使用的電子地圖都是平面的，如何把球面坐標系下的經緯度坐標映射為電子地圖的平面坐標系（數學上稱謂是笛卡爾直角坐標系）呢？這個映射過程就是投影變換，目前在 WebGIS 領域國際上統一使用墨卡托投影實現。
下面就分別介紹一下以上兩種坐標系以及映射原理。
經緯度坐標
表面上看是兩種，經緯度和墨卡托，但準確的說應該是三種（甚至N種）。因為我們日常接觸到的經緯度坐標都是經過加密算法處理之后的偏移坐標，與地理上真實的經緯度坐標有一定的偏移量。
真實的地理經緯度坐標系是國際標準，稱為WGS84標準，此標準下的坐標系稱為地球坐標系或地理坐標系。絕大多數電子地圖服務商都不會（或者說不準）直接使用 WGS84 坐標，因為地理信息是涉及國家安全的重要信息，所以一般都需要進行加密。
我們國家目前使用的加密標準是國家測繪局2002年制定GCJ02 標準，經過加密后的坐標系被稱為火星坐標系。在我國的所有電子地圖都必須至少經過 GCJ02 加密一次才可以上線使用。請注意，至少的意思是經過 GCJ02 加密之后，地圖廠商還可以進行二次甚至三次加密，比如百度地圖使用的 BD09 標準就是在 GCJ02 加密之后進行二次加密的結果。
下圖顯示的是同一個經緯度坐標在不同地圖上的位置：

墨卡托坐標
墨卡托坐標是球面坐標經過墨卡托投影之后得到的笛卡爾直角二維坐標，墨卡托投影全名叫做正軸等角圓柱墨卡托投影。其原理是假設地球被圍在一個中空的圓柱里，其基準緯線（赤道）與圓柱相切接觸，然后再假想地球中心有一盞燈，把球面上的圖形投影到圓柱體上，再把圓柱體展開，這就是一幅選定基準緯線上的“墨卡托投影”繪制出的地圖，見下圖：

為了便于建模和計算，墨卡托投影在真實的地球模型上做了以下幾個假設：
假設一：地球自轉是“垂直的” 。之所以加引號，是因為在宇宙角度上討論垂直和水平沒有任何意義。大家都知道地球的自轉軸（也就是南極點和北極點的連線）是有一個傾斜角的，所以我們見到的地球儀都是傾斜的；假設二：地球是一個正球體。嚴格來說，這條假設并不是墨卡托投影賦予的，而是來自Web墨卡托投影。原生墨卡托投影得到的平面地圖是一個長方形，Web 墨卡托投影在原生墨卡托投影基礎上的再次簡化，將地球假設為一個正球體，投影后得到的平面地圖是一個正方形。正方形方便瓦片切圖（關于瓦片切圖的知識下文會講），這樣能夠提前將地圖數據切片儲存，提高用戶的使用體驗。缺點是Y軸存在0.33%的誤差；
墨卡托投影有兩個致命的缺點：
第一，形變非常嚴重。越接近兩極的位置越嚴重，而且投影后視覺上的平面“面積”遠遠大于真實的地理球面面積。所以在某個特殊時期，墨卡托投影被個別北美洲國家鐘愛，因為他們的國家在投影之后“看上去”非常大。第二，南北極緯度丟失。墨卡托投影能覆蓋的緯度區間大概是 [-85.05, 85.05]（單位度deg），區間之外的兩極地區的經緯度坐標經過投影計算得到的值趨近無限大和無限小，無法在平面圖上表達，所以目前市面上的互聯網地圖兩極地區都是“黑洞” 。請看下面這張圖：

現實問題：計算兩點之間的距離
計算兩個POI點之間的“直線”距離是我們日常項目中出現概率很高的一種需求，之所以“直線”兩字加引號是因為在現實中地球上的兩個點不存在絕對的直線距離，在地理上都是球面距離，也就是數學上的弧長。球面上兩點之間的弧長計算是比較復雜的，而且地球是橢球體，進一步加大了復雜度。
這個問題有了墨卡托投影的輔助就很好解決了，墨卡托投影的計量單位是米（m），首先將兩個POI點的經緯度坐標換算為墨卡托坐標，剩下的就是簡單的勾股定理計算了。

經緯度與墨卡托坐標之間的轉換沒有絕對統一的換算公式，每個地圖廠商根據自己的加密算法都多少存在一些差異，一般不能跨地圖廠商使用

1.2 電子地圖制圖
電子地圖的制圖是一項非常復雜的流程，技術的縱深涉及前端、后端、（空間）數據庫等等，除了技術層面以外，還涉及民生、政治等因素。篇幅有限，這些細節就不一一列舉了，只挑選在前端范圍內以及現有項目中涉及的知識點講一下，主要有兩個方面：
瓦片切圖；路網結構。
其中第一點是出于技術層面考慮，對從事 WebGIS 的前端開發者來說是必須具備的，因為我們對地圖只是使用，不會涉及這么深入的知識，所以大家可以當這點為科普內容；第二點的目的是讓大家對路網尋址算法的復雜度有大概的認知，從而在進行與路網相關需求的技術評審時能夠全面考慮，從而制定更合理的研發周期。
下面就分別展開講一講。
瓦片金字塔
參照下面這張圖理解后續的內容：

球面的經緯度坐標經過墨卡托投影之后是一張二維的平面圖，圖中的大部分內容的變動頻率是非常低的，比如上圖中展示的大陸和海洋板塊，除非遇到地殼運動，否則基本不會變動。為了持久化存儲，在webgis領域引入了「瓦片」的概念，意思是將墨卡托坐標系的二維地圖按照既定的規則切成一個個小方塊保存到服務器，然后前端的應用程序在繪制地圖時將這些方塊按順序拼接為完整的地圖，這些小方塊被稱為