原文地址:http://zhihu.esrichina.com.cn/article/567html
一、矢量切片簡介
GIS的底圖一直使用金字塔技術進行切圖,使用戶可以快速訪問指定級別的地圖或者影像。可是切圖自己是一張圖片,沒法進行交互。因而又引入了矢量圖層用來顯示矢量點線面,這一般須要先獲取矢量地理數據(例如GeoJson),而後經過前端將其繪製成不一樣元素便能經過鼠標進行響應交互了。
這種GIS組織方式在數據量比較小的時候並無什麼大問題,可是在數據量比較大時(例如全國的詳細街區數據)存在如下幾個問題。首先,同一套數據的展現在不一樣的需求下可能須要不一樣的樣式(例如,白天和夜間模式)而對於傳統柵格切片對此需求必須從新進行切片;第二,因爲切片的分辨率固定,分辨率太高切片體積過大,分辨率太低高清屏沒法清晰顯示。第三,矢量數據的請求若是是按需請求每次都向服務器請求數據加劇服務器壓力,若是一次請求按需展現,當矢量數據過大時(例如全國的水系數據)對於前端的壓力過大。
如今,矢量切片利用一些新技術來控制動態的可交互的地圖展現方式,這種新技術可讓我的在移動端或者瀏覽器端自定義地圖樣式。矢量切片底圖能夠將基礎底圖和工做數據進行融合,擴展了底圖的交互性。人們能夠動態的賦予基礎底圖樣式以及經過配合可交互的工做數據來設計底圖樣式,根據內容進行智能製圖和實時分析並展現在基礎地圖上。那麼,究竟什麼是矢量切片技術?
矢量切片是一種利用協議緩衝(Protocol Buffers)技術的緊湊的二進制格式用來傳遞信息。當渲染地圖時矢量切片使用一系列儲存的內部數據進行製圖。被組織到矢量切片的圖層(好比道路、水、區域),每一層都有包含幾何圖形和可變屬性的獨立要素(例如姓名、類型等等)。通俗的說,就是將矢量數據以創建金字塔的方式,像柵格切片那樣分割成一個一個描述性文件,以GeoJson格式或者以pbf等自定義格式組織,而後在前端根據顯示須要按需請求不一樣的矢量瓦片數據進行Web繪圖。
矢量切片有切片的優點——成熟的緩存、縮放比例技術,另外還有矢量數據可以快速的提供地圖映射的優點。一個矢量切片會以緊湊的解析的格式包含全部相對應的幾何圖形和元數據,像道路名稱、用地類型、建築物的高。所以矢量切片是一種高性能的格式,這種格式在樣式、輸出格式以及交互性方面提供了高度的靈活性。以下圖所示傳統金字塔方式進行切圖時在並無要素或者要素相同的區域依然須要進行多級切片,而矢量切片只須要設定不一樣要素顯示的級別便可。
(1)矢量切片
(2)傳統金字塔
目前如OpenStreetMap和Mapnik等開放社區平臺倡導的矢量切片標準在過去幾年已經被一些主流的客戶端設備和製圖平臺所採納。最近Mapbox的團隊爲矢量切片開發了一套開放的說明,這個說明已經成爲社區支持的標準。如今已經有十多個公司以及開源項目使用這種標準格式的矢量切片。相對於構建一個矢量切片的新接口說明,ArcGIS更傾向於經過採用並改進已有矢量切片說明來支持這種興起於社區的標準。這意味着ArcGIS中的350000個組織用戶能夠經過矢量切片或者經過其餘資源發佈的可視化切片的形式來發布他們本身的數據。這將會使交互地圖和數據生態系統更加興旺。
矢量切片正逐步在ArcGIS的WebGIS平臺上獲得支持,目前JS API 3.15/4.0beta已經支持矢量切片的調用,ArcGIS Pro1.2增長了建立並能夠發佈到ArcGIS for Server 10.4或者ArcGIS Online的功能,同時在ArcGIS Online上也提供了一套在線的基礎矢量底圖,能夠經過修改樣式文件對基礎矢量底圖樣式進行自定義修改。下一步矢量切片將會更加完善,而且在ArcGIS Runtimes以致於整個WebGIS平臺上進行支持。Esri但願將來可以在使用柵格切片的地方均可以使用矢量切片。
二、ArcGIS Online的基礎矢量底圖
2.1 基礎矢量底圖簡介
2015年早些時候,Esri宣佈了ArcGIS平臺引入矢量切片的計劃如今咱們已經初步支持矢量切片做爲圖層加載到web map中了。做爲其中的一部分,Esri提供了一系列可更新的矢量基礎底圖(目前是beta版)可用於ArcGIS Online構建地圖和應用。
目前Esri基礎矢量底圖包含八種不一樣的地圖風格而且使用同一個地圖服務器。這一系列矢量基礎底圖能夠在Esri矢量基礎底圖組 中經過搜索「esri_vector」 找到。這個組中包含多種樣式的矢量基礎底圖,一些很接近原有的Esri基礎底圖(好比Streets, Topographic, Light Gray Canvas等),另外還有一些是新的樣式(好比Streets at Night, Navigation, and Imagery Hybrid)。這些矢量基礎底圖均可以做爲web map使用,經過樣式修改能夠保存成自定義的基礎矢量底圖,自定義的底圖能夠做爲基礎底圖添加其餘圖層或者做爲切片圖層添加到已有的地圖中。具體操做會在下面的章節中介紹。
Esri矢量底圖中有多種底圖樣式可用,點擊圖片進入Esri矢量基礎底圖
2.2 自定義基礎矢量底圖樣式
本節主要講述怎樣自定義基礎矢量底圖的樣式。下圖的例子 是一個根據ArcGIS Online 上的Light Gray Canvas tile layer 底圖從新自定義樣式的基礎矢量底圖。那麼怎樣自定義基礎矢量底圖的樣式呢?步驟其實很簡單:
第一步:建立一個屬於你本身的新的切片圖層項目
1 使用你的帳號登陸ArcGIS Online,並點擊「地圖」
2 添加一個矢量切片圖層,點擊「添加」按鈕選擇「搜索圖層」,查找輸入「esri_vector」,範圍選擇「生動地圖集圖層」,點擊「轉到」
3 選擇一個矢量切片圖層,點擊「添加」,再點擊「添加完畢」
4 點擊矢量圖層更多選項(標誌爲‘…’)選擇複製
5 重命名複製的圖層並點擊「保存圖層」(注意這裏是點擊下圖中菜單裏面的「保存圖層」而不是保存web map),點擊「建立項目」
第二步:爲你的新的切片圖層更新樣式
1 查看項目詳情,選擇「顯示項目詳細信息」
2 下載樣式,點擊「打開」選擇「下載樣式」,獲得一個root.json的文件。
3 修改樣式,經過工具或者記事本打開root.json根據下節對樣式結構的介紹修改樣式,並保存(爲防止混淆和自行重命名爲「myroot.json」)。
4 更新樣式,點擊「更新」選擇自定義的json文件,點擊更新項目便可更新基礎矢量底圖的樣式
第三步:使用新的切片圖層建立地圖
1 你能夠選擇將自定義的矢量切片底圖做爲一個web map的一個圖層,點擊「添加」「搜索圖層」,在「範圍」中選擇「個人內容」,選擇剛纔自定義的矢量底圖,點擊「添加」。
2 你能夠選擇將自定義的矢量切片底圖做爲一個web map的底圖,點擊「添加」「搜索圖層」,在「範圍」中選擇「個人內容」,點擊剛纔自定義的矢量底圖,選擇「做爲底圖」。
以上就是自定義並使用一個基礎矢量底圖的步驟,將來還會有更多的基礎矢量底圖發佈,而且會有更多相應的工具和功能。
2.3 矢量底圖樣式文件結構
矢量切片一個最大的特色就是你能夠根據本身的須要自定義底圖。底圖調整的程度徹底取決於你的想法,你能夠改變幾個重要的配色來建立一個全新的底圖。上一節介紹了在ArcGIS Online上修改的步驟,本節重點介紹,樣式文件的結構,很好的理解這個JSON文件的結構能夠更有利於你進行修改。
打開上節中下載的root.json文件,下圖表示的是JSON文件的主要結構,其中高亮顯示的是編碼結構。右側從上往下是地圖中包含的要素列表(如,背景、海洋深度、土地利用類型等)。左側部分表示要素類型的細節部分(如,填充、劃線等)。其中橙色的項目包含填充和邊線樣式,而綠色的項目包含標籤和道路的展現樣式。就像feature根據JSON代碼在地圖中展現同樣,矢量地圖繪製這些背景要素也要按照必定的順序,先填充水域,而後水系、道路,最後展現道路名稱、道路標識以及城市標籤。記住這些通用的代碼組織形式將有助於從新設計你的地圖。
2.3.1包含內容
ArcGIS Pro項目決定着一個要素是否包含在一個特定比例尺或者地圖級別中。所以,若是一個要素並無包含在項目中,他是不能被添加進這個數據集中的,另外,沒法經過前端對已經發布的矢量切片要素進行修改。可是,你能夠將已經存在的要素圖層經過比例尺的控制而隱藏。
「minzoom」:「<value>」 這個是你但願要素顯示的最小地圖級別
「maxzoom」:「<value>」 這個是你但願要素顯示的最大地圖級別
矢量切片參考文檔 包含一個完整的地圖要素列表以及相關的最大/最小地圖級別。
一個要素能夠經過添加「layout」的命令控制可見性,從而將其從地圖中(在全部比例尺中)被徹底移除。
「layout」 : {「visibility」 : 「none」},
若是你已經將該要素移除,別忘了找到並移除這個要素對應的標籤。
2.3.2設計
這種變化能夠僅僅經過操縱演示和線的寬度就能夠改變底圖的展現。這樣咱們如今只須要關注地圖搭配自己就行了。
顏色
樣式包括顏色的指令經過「paint」命令來控制。下面是一個例子。
顏色是用「HEX」(16進制)的值來表示的,在這個例子中是淡綠色。
這個顏色的RGB值爲:R218 G224 B178。若是你不習慣使用「HEX」,網上有不少在線的轉換器能夠將任何RGB的值轉換成「HEX」值。
爲一個多邊形添加一個輪廓能夠經過在「paint」中添加一個項目「fill-outline-color」 : 「#<hexcolor>」
調整多邊形的透明度,能夠添加「fill-opacity」 : 「<value>」 到「paint」命令中。這是一個簡單的線性比例,0表示徹底透明,1表示徹底不透明。
一些符號使用‘子元素’來生成圖案效果。使用 「fill-pattern」 : 「<子元素名稱>」添加到「paint」中。
線
這裏有一個線符號的例子:
線的寬度包含在「paint」命令中,而且以節點的方式書寫。在這個例子中「base」值設爲1.2pts。
「stops」 用來添加不一樣的線寬到不一樣的比例尺或者地圖級別中。在這個例子中級別1的線寬度爲基礎寬度的一半即0.6pts,地圖級別5的線寬度爲基礎寬度的1.33倍即1.6pts。線的寬度將會在兩個節點之間進行調整,若是你願意還能夠添加更多節點。
若是你想在你的線中使用虛線,那能夠添加「line-dasharray」: [ 3.0 , 2.0 ] 到你的「paint」命令行中。在這個例子中,‘3.0’是鏈接線的長度,‘2.0’是之間的間隔長度。如今只能生成這種簡單的虛線。
若是想控制線的透明度,能夠添加「line-opacity」 : 」<value>」 到你的「paint」命令行中。與填充命令類似,也是使用一個簡單的線性比例,0表示徹底透明,1表示徹底不透明。
2.4 經過修改樣式自定義邊界和標註語言
利用矢量切片的可交互的特性,使用Esri基礎矢量底圖還能夠更簡單的方式實現一些功能,用於更好的支持本地和國際用戶,例如,你能夠在同一個地圖服務下擁有兩套獨立的樣式(例如一個希臘,一個英語),而後基於用戶的位置和區域來顯示適合的標籤;或者對於有爭議的邊界可使用獨立的樣式來分別顯示有爭議的邊界,同時符合國際和當地的標準,更加方便全球的用戶使用Esri的底圖。矢量底圖這種方式對於以前使用柵格底圖須要從新生成新的圖層的方式更加方便,靈活,同時也大大的減小了服務器的存儲需求。
2.4.1自定義地圖語言
下方顯示的是由Esri矢量基礎底圖建立的自定義地圖示例。
在這個示例中,能夠經過切換地圖文本字段的值來更新全球街道地圖切片圖層,在大比例尺顯示當地語言(例如希臘),而不是顯示國際化語言(例如英語)。
1)全部實例的‘_name_global’ text-field修改成‘_name_local’(例如:「text-field」: 「{_name_local}」,)
2)城市、公園、土地利用和道路標註也是須要顯示爲當地語言的要素類。
因爲這些圖層在不一樣縮放級別下屢次顯示,因此是由一批查找和替換來實現更新全部適合的圖層。因爲參照相同的矢量切片,因此這些變化可用於全部可用的地圖樣式。
Esri社區地圖數據用於構建包含當地語言的矢量切片,包括世界各地的多種要素類。在整個測試期間,咱們計劃擴大可用語言的區域。目前有一個已知的侷限,有些語言從右至左顯示,例如阿拉伯語,不能正確的顯示。點擊這個web map,查看書籤,能夠在1:288000或更大比例尺下顯示當地語言。
2.4.2自定義地圖邊界
下方顯示的是由Esri矢量切片基礎底圖建立的自定義地圖示例。
在這個例子中,更改用於行政邊界圖層的 「filter」能夠更新全球地圖,這個例子用於顯示蘇里南當地認可的邊界(有爭議):
1)「Disputed admin0″圖層:將filter改成「filter」 : ["!in", "DisputeID", 80, 23, 24, 25, 26, 0],
經過filter將有爭議的邊界2三、2四、2五、26從「Disputed admin0″ 圖層中排除出來。
2)「Boundary line/Admin0″圖層:將filter改成「filter」 : ["any", ["==", "_symbol", 0], ["in", "DisputeID", 24, 25]],
而後經過filter將蘇里南宣稱的2四、25邊界加入到"Boundary line/Admin0″圖層中
有時候咱們會發現「Disputed admin0」要素層在root.json中出現了兩次。一樣「Admin0」也有相同的現象。這是因爲邊界線的樣式是由兩個線樣式疊加造成的
灰色的實線是Boundary line/Admin0/0樣式控制的,黑色的虛線是Boundary line/Admin0/1樣式控制的,雖然他們的樣式不一樣可是調用的是同一個要素。
那麼如何獲取這些爭議邊界的代碼呢?瀏覽這個webmap ,該地圖中包括不一樣的書籤,顯示了一些目前Esri矢量底圖中包含的有爭議的邊界。當你點擊一些特定的邊界要素,你能夠看到彈出窗口「DisputeID」中的重要信息(須要按着上面提到的方法更新filter),提示不一樣的國家顯示不一樣的邊界。
在Esri矢量底圖中,國際公認國際邊界(例如美國、加拿大邊界)一般顯示爲實線。在某些狀況下,一些國家將根據本身的承認對邊界進行渲染顯示。
三、矢量切片的生產發佈和使用
在ArcGIS平臺目前的版本(ArcGIS Pro 1.2 beta,ArcGIS 10.4 prerelease)下,製做和使用矢量地圖切片的流程以下:
1. 經過ArcGIS Pro來製做矢量切片;
2. 經過Portal for ArcGIS來發布切片;
3. 經過Portal for ArcGIS的Map viewer使用矢量切片;
4. 經過ArcGIS JavaScript API使用矢量切片。
3.1 數據準備
目前要製做矢量切片的數據須要遵循兩個標準:
1. 座標信息必須與ArcGIS Online底圖保持一致,即採用WGS 1984 Web Mercator(auxiliary sphere)。
2. 只支持ArcGIS Online的schema進行切片的製做。
3.2 使用ArcGIS Pro製做矢量切片
ArcGIS Pro 1.2 beta提供了三個與矢量切片製做相關的工具,位於Toolbox->Data Management Tools->Package下.
· Create Vector Tile Index:建立矢量切片的索引文件;
· Create Vector Tile Package:建立矢量切片包;
· Share Package:共享切片包到ArcGIS Online或Portal for ArcGIS中。
3.2.1 Create Vector Tile Package
該工具是製做矢量切片包的主要工具,用來從地圖中建立切片,並將建立好的切片打包成一個後綴爲.vtpk的文件。
工具的主要參數以下:
· Input Map:選擇用來製做矢量切片的地圖,注意去掉map中自帶的底圖,不然會提示「Error 001852:Layer type is not supported for vector tile packages.」
· Output File:選擇.vtpk的存儲位置;
· Tiling Format:意譯的話,是切片模式,有indexed和flat兩種:
· Indexed模式:在製做切片前,須要經過Create Vector Tile Index工具來對數據建立索引,工具會根據數據的疏密程度,建立不一樣LOD層級的索引網格,數據密集的地方切片層級較高,稀疏的地方層級較低。
· Flat模式:不建立索引,全部範圍內的數據按照一樣的規則進行切圖;
· Indexed方式建立的切片包,相比flat模式,時間短,數據量小;
· Minimum Cached Scale:最小切圖比例尺,目前只支持ArcGIS Online的schema;
· Maximum Cached Scale:最大切圖比例尺,目前只支持ArcGIS Online的schema;
· Index Polygons:輸入經過Create Vector Tile Index工具建立的索引多邊形;若是選擇了indexed模式,須要制定索引多邊形,若是沒有事先作好的多邊形,此參數能夠不填,切圖工具會默認生成索引並按照索引進行切圖,但生成的索引並不輸出爲要素圖層;
· Summary:摘要,用來在ArcGIS Online或Portal for ArcGIS的內容中顯示;
· Tags:標籤,用來在ArcGIS Online或Portal for ArcGIS中搜索項目用。
配置好這些參數以後,點擊右下角的「run」按鈕,工具就開始建立矢量切片了。
3.2.2 Create Vector Tile Index
如上一步中提到,本工具用來對切圖數據建立索引,主要參數以下:
· Input Map:在ArcGIS Pro中,以map爲單位制做矢量切片,因此也是以map爲單位建立索引;
· Output Tile Feature Class:指生成的索引文件的存儲位置,選擇合適的位置便可,根據你選擇的位置,最終生成的是shp或者Geodatabase;
· Maximum Vertex Count:每個索引網格里,最多能容納的多邊形頂點數,初步推測這個值影響的是索引網格的大小,默認爲10000,建議保持默認值便可。
填寫好這些參數以後,點擊右下角的「run」,執行製做索引。
3.2.3 Share Package
該工具用來將生成好的矢量切片包上傳到ArcGIS Online或者Portal for ArcGIS中:
· Input Package:輸入已經制做好的矢量切片包;
· Summary:摘要信息;
· Tags:標籤信息;
· Credits:能夠填寫些製做者相關的信息;
· Everybody:勾線後,上傳的切片包就對全部人分享了;
· Groups:能夠在組織的羣組間進行分享,根據須要選擇。
配置好這些信息以後,點擊右下角的「run」,便可上傳切片包。
注1:一般咱們也能夠經過ArcGIS Online或者Portal for ArcGIS的「個人內容」界面中,選擇「Add Item」->「from my computer」的方式上傳.vtpk,可是若是.vtpk大小超過2G,就只能經過本工具上傳。
注2:本工具只上傳.vtpk,並不進行切片服務的發佈。
3.3 經過Portal for ArcGIS發佈矢量切片
目前,ArcGIS Online暫不支持自定義的矢量切片底圖的發佈。
在上一步中,咱們經過share package工具上傳了.vtpk文件,在Portal for ArcGIS中「個人內容」頁面能夠看到該item,選中該item進入詳細信息頁面,選擇「Publish」,可將該切片包發佈成矢量切片服務;
還能夠經過「個人內容」頁面,選擇「add item」-> 「from my computer」,彈出如下對話框,選擇.vtpk文件,並勾選「publish the file as a tile layer」,點擊「Add item」便可完成發佈。
在Portal for ArcGIS中成功發佈好矢量切片服務以後,會在server的工做目錄(安裝時指定,如個人是「D:\arcgisserver」)下的\directories\arcgiscache\VectorCache\Hosted下找到一個與已發佈的服務名稱一致的文件夾,其中記錄了該矢量切片的全部信息。
· resources:存放的是與矢量切片服務有關的資源,包括服務的字體文件,樣式文件,以及sprites文件等,其中最重要的是styles文件夾下的root.json文件,裏面記錄了該矢量切片服務的樣式,修改服務的樣式就是經過修改該文件來實現的;
· tile:該目錄中存放的是製做好的矢量切片,以2.0版本的boundle格式存儲;
· tilemap:該文件夾中只有一個名爲root.json的文件,這其中記錄的是矢量切片服務第一次加載有關的信息;
· root.json文件:記錄的是整個矢量切片的服務信息,包括服務名稱、服務的範圍、座標參考、切圖等級及比例尺等多種信息。
3.4 經過Portal for ArcGIS使用矢量切片服務
發佈成功後咱們能夠在item詳細頁面看到它的服務類型和服務url,點擊「open」,能夠將其加載到Portal for ArcGIS的Map viewer中進行瀏覽。
在Portal for ArcGIS中還能夠修改矢量切片底圖的樣式,在3.3文件中介紹過,在ArcGIS for Server的工做目錄下能夠找到root.json文件,該文件控制的是底圖的樣式,經過修改該文件能夠修改圖層的樣式。具體步驟以下:
一、 將發佈好的矢量切片加載到map viewer中;
二、 複製並重命名複製的圖層;
三、 保存該圖層;
四、 進入到該圖層的item詳細信息頁面(或者直接在ArcGIS for Server工做目錄中找到該圖層的樣式文件);
五、 在下拉列表中選擇「下載樣式」;
六、 對下載的樣式進行修改;
七、 在item詳細信息頁面中,選擇「update」,將修改的樣式上傳,並肯定;
八、 修改樣式成功,可在map viewer中進行查看。
3.5 經過ArcGIS JavaScript API使用切片
3.5.1 相關類和方法
ArcGIS JavaScript API 3.15即提供了對矢量地圖切片的支持,它提供了一個特定的VectorTileLayer類,用來使用矢量切片服務。該類有1個構造函數,構造函數的2個參數有3種用法:
· 用法1:直接傳入矢量切片服務的url;
· 用法2:直接傳入矢量切片服務的樣式文件(限於ArcGIS Online上供全部人訪問的服務,服務url公開,經過傳入樣式文件能夠指定的樣式渲染服務);
· 用法3:傳入矢量切片服務的url以及初始化顯示的信息,如顯示層級、最大最小比例尺、是否可見、透明度等等。
另外,還提供了許多屬性和方法,用來獲取矢量切片服務的信息,這裏最重要的屬性是style,由於矢量切片最大的特色就是可使用客戶端修改樣式:
對應的修改樣式的方法爲setStyle(styleURL):
該類還有一些事件,以下:
當修改樣式方法被調用時,會觸發style-change()事件。
3.5.2 示例
如下是在js端修改樣式的簡單示例:
這是該矢量切片服務最開始的樣式,其代碼以下:
經過修改其root.json文件,能夠快速的修改其樣式,好比這裏咱們修改如下第一個圖層的樣式,保存下樣式文件:
這樣再看到的矢量切片服務就變成了一下風格:
制定及修訂記錄前端