VectorMap.js是一個開源地圖渲染JavaScript庫， 可以使用WebGL或者HTML5兩種方式進行交互式矢量地圖 （包括“矢量瓦片地圖”，一般性矢量數據地圖）和 柵格瓦片地圖的渲染。 WebGL渲染意味着高性能，大數據， HTML5渲染意味着老瀏覽器的兼容性。 借助WebGL和HTML5的兩架馬車，VectorMap.js在性能以及瀏覽器兼容性方面表現優異。
作為一個專為Web GIS客戶端項目提供的開源JavaScript類庫包，OpenLayers用於實現對於標准格式發布的地圖數據的訪問與顯示，經過十幾年的發展， 已經成為世界范圍內進行前端GIS項目的首選開源地圖庫。GIS前端渲染庫除了OpenLayers，還有Leaflet和ESRI公司的ArcGIS API, 但是相比較而言, OpenLayers的接受度和用戶群更廣更多一些。 VectorMap.js就是在OpenLayers庫基礎上開發而來， 使用WebGL 重寫了整個渲染部分，結合web worker的多線程優勢，帶來更高性能的渲染體驗和交互體驗的同時，保留了OpenLayers強大的功能，能夠協助開發人員快速進行地圖應用的開發。
項目地址：https://github.com/ThinkGeo/VectorMap-js
在線Sample : https://samples.thinkgeo.com/cloud/
- Hello VectorMap.js
現在開始我們的ThinkGeo VectorMap.js之旅， 其整體用法延續了OpenLayers的API模式和開發習慣，如果具有OpenLayers原生庫開發經驗的話，上手還是非常快的。閑話少說， 我們首先在頁面引入VectorMap.js腳本庫和樣式庫。
<!-- style sheet for vectormap.js --> <link rel="stylesheet" href="https://cdn.thinkgeo.com/vectormap-js/3.0.0/vectormap.css"></link> <!-- latest minified version of vectormap.js --> <script src="https://cdn.thinkgeo.com/vectormap-js/3.0.0/vectormap.js"></script>
也可以在GitHub找到VectorMap.js的release版本：
https://github.com/ThinkGeo/VectorMap-js/releases
執行上述引入腳本后，即創建了OpenLayers的ol對象和VectorMap.js自定義的ol.mapsuite對象，通過它可以使用VectorMap.js的全部功能，包括OpenLayer原有所有功能。 如果具有WebGL經驗的話，我們會發現所有的矢量渲染都是基於WebGL完成的，包括距離測量和面積測量等小工具。
- 1申請ThinkGeo Cloud Access Key
為了體驗VectorMap.js在矢量化數據方面的優勢和強大的渲染能力， 我們從官方推薦的“世界地圖”例子為入口做一個嘗試。 因為官方的”Hello World”依賴於ThinkGeo Cloud Service, 所以需要申請Access Key 才能進行矢量瓦片的請求，然后進行數據的渲染。 Access Key的申請非常簡單，基本一兩分鍾內可以搞定， 當然如果你想用其他公司提供的矢量瓦片也沒有問題，但是就需要自定義地圖樣式， 這塊我在另一張會單獨講述。
言歸正傳，首先訪問 https://cloud.thinkgeo.com , 如果沒有注冊用戶，請點擊“Try It Free”，進行注冊，如果已有賬號請自行直接登錄。 流程如下。
- 在主界面點擊 “Try It Free”
- 輸入有效的用戶名密碼后點擊 “Register”, 完成注冊。
- 登錄，登錄后點擊”Create a client key”, 然后獲取API Key
1.2開始第一個VectorMap.js程序
啟動Visual Studio Code, 創建一個”index.html”, 引入之前提到的VectorMap.js腳本庫和樣式庫后， 在”<body>”標簽中添加地圖載體”<div>”, 如下：
<div id="map" style="width:800px;height:600px;"></div>
然后在html頁面添加如下JavaScript代碼，進行地圖資源的加載和渲染顯示。
let worldstreetsStyle = "https://cdn.thinkgeo.com/worldstreets-styles/2.0.0/light.json";
let worldstreets = new ol.mapsuite.VectorTileLayer(worldstreetsStyle,
{
apiKey:'your-ThinkGeo-Cloud-Service-key'
});
let map = new ol.Map({
layers: [worldstreets],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-96.79620, 32.79423]),
zoom: 4,
}),
});
注意： 在代碼中“your-ThinkGeo-Cloud-Service-Key”, 將其替換為自己剛剛申請的 API Key.
- 3運行，顯示地圖
修改保存之后點擊運行就可以得到一幅矢量地圖了，此過程可能會稍微有點長，要耐心多等一會兒。