2018/12/27 | 電子報No.0162期 | Nelson 黃祐祥 

以下黃線部分為作者原文

本篇部分內容來自於:Prototyping a Smoother Map,作者為Antin Harasymiv,Google的UX工程師,作者希望能同步縮放與動畫,在JavaScript Maps API對於縮放的控制有限,為了獲得更多的控制,嘗試利用HTML5 Canvas自定義中實現混合圖磚。

地圖操作 – GIS系統非常基本的功能,往往也是大家會容易忽視的細節,今天就從這個角度切入,來看這幾年GIS的改變及技術層面間的影響。
 

早期的WebGIS是怎麼做的?

在Google Maps推出前,WebGIS受到當時單機版的影響,地圖操作皆是遵循以往的操作,操作一次就向伺服器呼叫查詢一次,等待伺服器計算,在系統上顯示結果。

單機的操作沒有網路速度的影響,都算快速,不過移植到WebGIS後,同時在線操作的使用者越多時,伺服器負擔急遽加重,對於使用者而言,等待的時間也越長,操作的體驗也會受影響,當時的解決方案主流就是加強主機規格、增加負載平衡機器這類的配套處理。

此時,Google Maps推出了……
 

Google Maps推出後深深影響了WebGIS

在2005年,Google推出了預產圖磚 – Tiled Maps的創新概念,一推出後改變了當時地圖的操作,GIS界也颳起了很大的旋風,同時在網頁技術上非同步的操作概念在Web中興起,不再是每次操作都得等伺服器運算後,才能做下一個動作,使用者除了可以用很快的速度得到底圖資料外,在這過程中也可以自由順暢的操作瀏覽、縮放地圖。

試想若是用傳統伺服器運算,對於每月用戶超過10億的Google Maps,需要多強大的伺服器,才有辦法同時提供給大家使用。Google Maps最初的設計就與單機GIS有所不同,服務的對象不同,解決問題的方式切入點也不同,因此才有了利用預產不同比例尺的圖磚服務這樣的改變。

 

圖磚

「將地圖分解為較小的區塊,然後放在一起拼成一個更大的圖片」,透過預先預製的圖磚讓每個使用者都可以共享同一份資料,並且讓伺服器有辦法進行快取處理。

Tiled MapTiled Map

縮放級別(Zoom Levels)

Google Maps根據所在位置的不同,設定不同數量的縮放級別(最多21層),地圖由256*256大小的圖片拼貼而成,每增加一個層級,數量就加倍。縮放級別為0時,世界地圖就只有單張圖片,縮放級別為第1層時,為2*2共4個圖片,達到21層時,地圖組成就變為200萬*200萬共4兆個圖片。

地圖圖塊

每個縮放級別的地圖圖塊

每層縮放級別都有自己的樣式規則來決定要顯示哪些資訊。不會出現將道路資訊放置到世界、國家層級等地圖,Google也有獨立的團隊不斷在平衡每個層級資訊的呈現和設計。

前幾個層級幾乎就是世界地圖。第5層大陸和陸地為主要特徵。第10層為城市細節。在15層關注是在街道。縮放達到20層,就是建築物的資訊。

對應到每個層級的比例尺,第1層每個pixel實際大小代表著78公里,第5層為5公里,第10層為150公尺,第15層為5公尺,第20層時為15公分,這時已是非常的細緻資料。

 

平移(Panning)

與地圖互動是圖磚展示真正價值的地方,過去的地圖操作,若移動超出了地圖範圍,就需要像是翻頁般來取得更多的資訊。而利用圖磚的方式,它可以讓瀏覽地圖更自由、不受中斷的方式來平移、縮放。

每個圖磚都位於容器中,當平移地圖時,不是平移圖磚,而是移動容器本身的位置

容器移動,非Tile移動

 

固定大小的DOM物件

當使用者平移地圖時,會檢查哪些圖磚應該可視,並自動載入新圖磚,移除不再可視的圖磚,這樣的做法非常快速,同時也讓使用者不容易查覺載入所造成的時間

 

縮放(Zooming)

對於圖磚來說,平移是無縫的,但是縮放卻是圖磚地圖的挑戰之一。縮放的概念非常簡單,用下一組圖磚替換了地圖,不過在切換的過程中,因為交換了兩種不同的內容,瞬間被接合(snap)感覺。

不同層級的圖磚接合

好在這很容易找出補償方式,利用保持滑鼠指向位置的一致,讓使用者的指向都是他們關注的位置,來減緩跳動。同時利用動畫來拉近兩者的差異,當縮放時,暫時保留兩個不同縮放級別的圖磚,利用非常快速的縮放動畫(新的圖磚先縮小一半後放大、舊的圖磚放大一倍),實際在切換,眼晴不易察覺這些變化,製造響應式的效果。

快速縮放的動畫(Maps JavaScript API)

這樣的縮放接合(scale &snap)的方式後續廣泛被運用在不同的地圖核心

Google Maps JavaScript API, ESRI JavaScript API,Bing Maps, Here Maps, Yahoo Maps, MapQuest, and OpenStreetMap (LeafletJS)

Google利用不同的技術方式切入我們習以為常的GIS操作,”只”針對使用者而言,在地圖操作時,因為許多內容已經花時間準備好了,可以減少了伺服器運算的等待時間,整體的操作可以快速很多。不過預產也限制了能顯示的比例尺,無法所有內容都同時套疊。另一方面資料需要預先產置,讓圖資更新不像過去這麼簡單取代,這些相繼的缺點。

傳統 GIS vs 圖磚式 GIS 差異

這是第一次的技術變革:資料本質沒有改變,改變的是WebGIS 伺服器端提供的內容,從原來的動態建製地圖,改為預先製置的靜態內容,利用空間換時間,減少使用者等待的時間。

這樣的概念影響了當時WebGIS系統的操作,給予非常大的震撼,讓業界意識到不同的設計思維帶來的洗禮,很快的WebGIS軟體公司也開始學習使用,並應用於系統開發上,結合了圖磚的優、缺點,將經常使用但更新較不頻繁的電子地圖利用圖磚運行,將經常更新的圖資依照傳統的動態模式發布,這樣的混合做法(Hybird)至今仍廣泛使用於各大系統平台中。

 

向量式資料的逆襲

在大家較為適應混合式的應用後,這時硬體的升級開始影響了GIS。

2009年後可說是智慧型手機的「爆炸性成長階段」,在硬體裝置的的提升,螢幕的解析度越來越高,新名詞逐漸出現HD、Retina HD、FHD、2K、4K,相關裝置的螢幕也開始升級。使用較高解析度的裝置來操作WebGIS圖台,都會有看起來糊糊的感覺。原因在預產圖磚時,需要花費許多時間,在品質與時間的平衡下,多半都只會選擇一種固定DPI來輸出,考量到實際檔案大小與網路速度,多半會以96DPI為主,較高解析度的裝置,顯示較低DPI的圖資,無法避免的顯示的品質就下降了。

GIS平台普及,工作日常或是業務需求使用地圖相關的系統,對於基本圖資的更新頻率需求也越來越高,圖磚式的弱項也一再的被檢視出來 – 顯示解析度的不足,更新速度的緩慢

技術變革沒有因此而停下,Google Maps再次丟下震撼彈,Vector Maps的推出。

 

Vector Maps

在2013年 Google Maps 對於maps.google.com做了重大更新,將原先的網格式PNG圖磚更換為向量圖磚(Vector Tiles)。向量內容包含了標籤(Labels)、路徑(Paths)、區塊(Polygons)等文字資訊,由裝置自行繪製成地圖。

向量資料在傳輸時資料時,有較優秀的壓縮比(節省網路頻寬),同時可以實現動態資料更新、客製樣式化,並且可以有效的改善縮放時的效果。也改善了圖磚的缺點:比例尺固定、無法自由套疊、圖資更新問題。

 平滑化的縮放效果

這樣的格式的轉變,對於電子地圖相當的適用,過去圖磚利用網格式(rasterized)的PNG時,在縮放的過程中地圖無法分辨出什麼是道路、什麼是停車場,所有的內容都會被拉伸並像素化。

改用向量的資料,在縮放地圖時,可以讓標籤處於正確的位置、保持道路的一致寬度,同時縮放所有的多邊形,利用這些細微的操作,讓視覺有更好的感受。沒有了階層式的跳動感,使用者控制縮放的速度及大小,最後停止縮放後,再把更細節的資訊顯示出來。

第二次的技術變革:資料本質也沒有變,改變的是WebGIS 伺服器端提供的內容格式並將繪製地圖轉移到使用端。原來網格式的靜態內容(圖檔),改為向量式的靜態內容(文檔),文字內容在使用者裝置轉換、繪製成觀看用的地圖及配色,善用了伺服器集中式的預製,及使用者裝置分散式的繪製地圖,這種做法再也不會有解析度的問題,使用者要顯示的地圖中也可以針對形狀、配色、資訊做更細緻化的操作調整,解決了過去遭遇的狀況。

這次的變革同樣的影響整個GIS,不過變化的週期卻拉長了許多。原因在於雖然這種做法有很多優點,但對使用者的裝置有更多的硬體要求,裝置效能不夠強大的話,在操作向量資料反而會更慢,並且相容性問題仍須一一克服。若細心觀察,目前的Google Maps不是在所有操作都使用Vector來顯示,在初始化或是裝置速度較慢的情況下,仍會使用圖磚的方式兩者交替使用,甚至Google Maps JS API所提供的內容也是網格式的圖磚。

關注到向量圖磚發展的時間點

Google 推出 VectorMapmapBox 建立 vector tile specLeaflet 實作 vector tile pluginESRI 決定採用 mapBox vector tile specESRI 推出支援 vector tile preview版

 

回歸到GIS的技術變革,這兩次都是Google利用新的技術來優化Google Maps的操作,就像蝴蝶效應一樣, 有意無意的改變了GIS在呈現上的技術改變。在Google使用VectorMap後,無論是新創公司或是社群、ESRI及整體業界都動了起來。不管如何,GIS的操作、業界技術的走向,都因為Google的涉入變的更完善、使用者體驗變的更美好,推動將GIS業界向往推了數步。

 

不斷拉近的未來

對於行動裝置的操作、講求更好的操作體驗的世代中,裝置的效能相較於過去已經有飛快的成長,運算的部分負擔也逐漸從伺服器移轉至使用者裝置上,雖然現在是盛行講求雲計算,大量資料機器學習,雲端伺服器與使用者裝置之間的取捨、裝置效能提升的成本消長,在未來可能仍處在不斷平衡的過程,就像當時在圖磚概念推出後,GIS系統使用也不是全然的應用,而是設計出混合(Hybrid)的方案,底圖使用圖磚、動態圖資改用WMS之類的方式互動。

從一般的平移、縮放這種基本的地圖操作,可以觀察到在不同的時代及技術更新後,利用當時最適合的方式處理,讓使用者可以有更好的感受,並不斷的升級。從傳統單機操作的思維,放入至WebGIS後,出現了Tiled Map這樣的概念。在行動裝置興起後、網頁開始注意響應式設計、裝置的效能提升後,Vector Tile出現了,不斷的用新的技術方式來拉近日常與GIS之間的關係。我們無法完全預言下一世代的會有什麼樣的重大變革,不過可以肯定的是GIS會更融入於日常生活中,越來越近似我們存在這三維世界。

 

備註:作者在原文時有實做出利用網格式的圖磚,對於縮放效能的優化,設計上的思維分享給各位。

 

讓網格圖磚的內容動起來

向量圖磚可以利用在客戶端自定義繪製的方式,達到好的縮放體驗,不過若是使用傳統網格圖磚,就需要一些創意來優化這些操作了。

 

創造更細緻的縮放級別

過去在預產不同縮放級別時,都是固定數量的,在控管整體的資料量的同時,也是限制了使用者操作,讓在縮放時總會有不連續的感覺,其實可以利用在縮放的過程中,利用透明度的調整,混合使用不同層級的圖磚,擴充更細緻的層級。

與先前提到的切換的補償方式相同,在縮放過程中,對於不同層級的圖磚,加入線性透明度,下一個層級在縮放的一開始,圖磚為透明顯示(opacity 0),縮放結束後正常顯示(opacity 1),中間的層級就利用2的冪次來運算。

此處最左側為縮放級別0,最右側為縮放級別1,傳統上就是這兩個層級在切換,不過在透過透明度的線性運算後,可以再擴充中間的三個層級。為了方便觀察,利用灰階圖磚顯示代表起始的層級內容(最左)、彩色圖磚代表下一層級內容,可以觀察到越接近下一個層級(最右)時,彩色圖磚主導的程度越多,細節(如標籤)開始淡入;相反的若是縮小,則會逐漸丟失細節。

放大時,主導內容(彩色)的變化

縮放時,內容放大淡出變化

實驗後,整體運作的非常好,提供相對的平滑縮放(比純粹的縮放接合好得多),雖然它不像向量資料般的平滑,但它實際上完全消除了接合(snap)的跳動感。

作者將此效果稱為比例和混合(scale & blend)方式,不止縮放平滑,並讓使用者感到非常響應。

縮放時,內容放大淡出變化

對於Google和MapBox、ESRI都有向量資料呈現的方式,而這樣混合應用方式,非常更適合於還沒升級到向量資料的系統,可以提供更順暢和響應的體驗。

更多有趣的地圖資訊都在「瑞竣科技 給您地圖新鮮事」,馬上Follow


 

Nelson

任職於瑞竣科技應用事業部研發處,專長是將空間資訊與程式開發結合,喜歡將天馬行空的想法落實並實現,近期沉溺於逗笑自己的孩子得到短暫的快樂。