VectorMap.js是一個(gè)開源地圖渲染JavaScript庫， 可以使用WebGL或者HTML5兩種方式進(jìn)行交互式矢量地圖 （包括“矢量瓦片地圖”，一般性矢量數(shù)據(jù)地圖）和 柵格瓦片地圖的渲染。 WebGL渲染意味著高性能，大數(shù)據(jù)， HTML5渲染意味著老瀏覽器的兼容性。 借助WebGL和HTML5的兩架馬車，VectorMap.js在性能以及瀏覽器兼容性方面表現(xiàn)優(yōu)異。

作為一個(gè)專為Web GIS客戶端項(xiàng)目提供的開源JavaScript類庫包，OpenLayers用于實(shí)現(xiàn)對(duì)于標(biāo)準(zhǔn)格式發(fā)布的地圖數(shù)據(jù)的訪問與顯示，經(jīng)過十幾年的發(fā)展， 已經(jīng)成為世界范圍內(nèi)進(jìn)行前端GIS項(xiàng)目的選開源地圖庫。GIS前端渲染庫除了OpenLayers，還有Leaflet和ESRI公司的ArcGIS API, 但是相比較而言, OpenLayers的接受度和用戶群更廣更多一些。 VectorMap.js就是在OpenLayers庫基礎(chǔ)上開發(fā)而來， 使用WebGL 重寫了整個(gè)渲染部分，結(jié)合web worker的多線程優(yōu)勢(shì)，帶來更高性能的渲染體驗(yàn)和交互體驗(yàn)的同時(shí)，保留了OpenLayers強(qiáng)大的功能，能夠協(xié)助開發(fā)人員快速進(jìn)行地圖應(yīng)用的開發(fā)。

項(xiàng)目地址 ： https:// torMap-js https:// oud/ https:// torMap-js/releases

執(zhí)行上述引入腳本后，即創(chuàng)建了OpenLayers的ol對(duì)象和VectorMap.js自定義的ol.mapsuite對(duì)象，通過它可以使用VectorMap.js的全部功能，包括OpenLayer原有所有功能。 如果具有WebGL經(jīng)驗(yàn)的話，我們會(huì)發(fā)現(xiàn)所有的矢量渲染都是基于WebGL完成的，包括距離測量和面積測量等小工具。

1. 1申請(qǐng)ThinkGeo Cloud Access Key

為了體驗(yàn)VectorMap.js在矢量化數(shù)據(jù)方面的優(yōu)勢(shì)和強(qiáng)大的渲染能力， 我們從官方推薦的“世界地圖”例子為入口做一個(gè)嘗試。 因?yàn)楣俜降摹盚ello World”依賴于ThinkGeo Cloud Service, 所以需要申請(qǐng)Access Key 才能進(jìn)行矢量瓦片的請(qǐng)求，然后進(jìn)行數(shù)據(jù)的渲染。 Access Key的申請(qǐng)非常簡單，基本一兩分鐘內(nèi)可以搞定， 當(dāng)然如果你想用其他公司提供的矢量瓦片也沒有問題，但是就需要自定義地圖樣式， 這塊我在另一張會(huì)單獨(dú)講述。

言歸正傳，首先訪問  https://cloud.thinkgeo.com  , 如果沒有注冊(cè)用戶，請(qǐng)點(diǎn)擊“Try It Free”，進(jìn)行注冊(cè)，如果已有賬號(hào)請(qǐng)自行直接登錄。 流程如下。

• 在主界面點(diǎn)擊 “Try It Free”

• 輸入有效的用戶名密碼后點(diǎn)擊 “Register”, 完成注冊(cè)。

• 登錄，登錄后點(diǎn)擊”Create a client key”, 然后獲取API Key

1.2開始第一個(gè)VectorMap.js程序

啟動(dòng)Visual Studio Code, 創(chuàng)建一個(gè)”index.html”, 引入之前提到的VectorMap.js腳本庫和樣式庫后， 在””標(biāo)簽中添加地圖載體”