用html5實現一個高性能GIS地圖可視化

以瓦片形式的柵格圖像格式（PNG或JPEG圖像）繪製地圖的傳統方法一般是今天在網絡上傳遞地理空間數據的方式。這是經過在服務器上生產瓦片圖像，並將它們提供給地圖客戶端。這種技術已被許多Web地圖供應商所使用，而且它很適宜用於建立好看的底圖，如OpenStreetMap，谷歌，Bing地圖等。

這都能很好地用於Web地圖繪製，但有關GIS的內容呢？一般狀況下，在建立一個GIS項目的過程當中，你須要修改數據，從新排列圖層，調整符號和標籤，編輯和建立功能，地理處理，分析等，這些操做的結果須要即時地實現和服務器端瓦片渲染的傳統方法卻不能實現如此的切割。建立完整的地圖瓦片緩存常常須要幾個小時，甚至幾天的時間才能完成。若是你不知何故忘記了在生成瓦片緩存開始前打開水路層的標籤，好了，剩下的一週又得從新跑一遍程序了。

你可能須要與地圖數據進行交互，若是你的數據做爲平面光柵圖像這是不可能達到的。地圖客戶端已經進行了一些改進，它們能夠使用Flash和Silverlight等技術，但地圖瓦片技術仍然是相同的，而且須要第三方插件去繪製你的地圖。

將矢量做爲矢量渲染

你們都知道地理空間矢量數據包括三種基本類型：點，線和多邊形。此外，每種要素擁有一系列數據屬性。傳統的測繪技術的缺點是，在轉換和渲染點，線和多邊造成光柵平鋪圖像的過程當中，這一切有用的矢量和屬性信息丟失了。

將矢量做爲矢量渲染，能夠爲GIS在Web和移動設備上開啓一個全新的可能性。試想一下，用鼠標與你的數據進行交互：鼠標懸浮，點擊或雙擊。想象一下，經過快速和低延遲地、即時地動態改變符號而繪製了大量的要素。想象一下，在瀏覽器中你將擁有在桌面GIS中所具備的完整的GIS編輯功能，好比拓撲修改和捕捉等。

若是咱們有一個解決方案實際上可能使矢量數據以其天然矢量形式渲染呢？ 事實上，在許多地圖客戶端，矢量能夠覆蓋在柵格圖片的上面，但目前在現實世界中卻未能實現，特別是當你須要處理數百萬哪怕是數以千計要素的狀況下。爲了達到這樣的能力，現有的地圖渲染引擎將須要一個大的變化，特別是在後端，固然前端也是如此。

HTML5 Canvas

在過去的幾年裏，咱們親眼目擊了在Web瀏覽器中使人難以置信的創新和進步。伴隨着其跨臺式機、移動設備和平板電腦大量地出現，Web瀏覽器已經成爲許多現代應用程序的重要組成部分和平臺。在現代瀏覽器中一系列全新的功能因HTML5而出現。

在HTML5標準提供的許多功能中，提升GIS的關鍵，在於HTML5的Canvas。Canvas基本上是在瀏覽器中動態生成的一個位圖（圖像）。矢量渲染性能使得它在GIS應用中如此有用。

矢量做爲矢量形式，再加上全部的複雜的符號系統和地圖繪製功能，轉移到客戶端（如IE瀏覽器），使服務器只須要提供原始的矢量數據和屬性數據。這意味着在地圖引擎能夠更有效地響應。正如前面提到的，這種方法須要在服務器上採用一個徹底不一樣的策略，在那裏地圖瓦片都實際上被生產出來。

HTML5 Canvas瓦片矢量地圖引擎

 基於其原有的瓦片矢量地圖引擎，GIS Cloud建立和實施了全球第一個HTML5矢量映射引擎，它能夠生成Flash格式的矢量地圖瓦片。它提供的性能是史無前例的。原來的系統已經適用於HTML5 Canvas，且它是現在GIS Cloud提供全部地圖的主要方法。 

該引擎的核心是一個很是快的服務器組件，從無到有快速地建立，高效地讀取幾何數據和屬性數據，並將它們以優化的矢量地圖瓦片形式傳送給客戶端。而在地圖客戶端上，矢量地圖技術使用Leaflet（一個優秀的由CloudMade開發的開源Javascript繪圖客戶端庫）可視化數據。

實例：

帶有6百萬線段的shapefile: http://www.giscloud.com/map/16594/germany-6000000-features

Parcel polygons: http://www.giscloud.com/map/12584/sarasota-parcels

超乎尋常數量的交互式Canvas市場: http://www.giscloud.com/map/16671/a-world-of-a-million-points

更多HTML5地圖，請點擊由GIS Cloud社區建立的公衆地圖: http://www.giscloud.com/app

總結：

HTML5 Canvas爲GIS帶來了什麼：

· 一個很流暢的的地圖繪製的用戶體驗，不管是在桌面瀏覽器、手機或平板電腦上

· 將矢量做爲矢量渲染

· 即時渲染數以百萬計的要素的能力

· 快速渲染，無需預緩存地圖

· 顯著減小瓦片所需的帶寬

· 須要更少的存儲空間

· 地圖是徹底互動的：點擊，鼠標懸浮和風格動態化

· 在客戶端徹底適用的符號，這意味着它很容易改變地圖樣式，而無需從新加載圖層

· 開箱即用，在全部平臺上Web瀏覽器都採用了HTML5標準（即桌面，IOS，Android等）

· 在Web瀏覽器中爲用戶帶來真正的桌面GIS體驗的卓越背景

轉載請標明出處：http://www.yahewan.com/