JavaScript矢量化地圖庫 – 快速入門

時間 2019-11-16

原文原文鏈接

VectorMap.js是一個開源地圖渲染JavaScript庫，能夠使用WebGL或者HTML5兩種方式進行交互式矢量地圖（包括「矢量瓦片地圖」，通常性矢量數據地圖）和柵格瓦片地圖的渲染。 WebGL渲染意味着高性能，大數據， HTML5渲染意味着老瀏覽器的兼容性。藉助WebGL和HTML5的兩架馬車，VectorMap.js在性能以及瀏覽器兼容性方面表現優異。css

做爲一個專爲Web GIS客戶端項目提供的開源JavaScript類庫包，OpenLayers用於實現對於標準格式發佈的地圖數據的訪問與顯示，通過十幾年的發展，已經成爲世界範圍內進行前端GIS項目的首選開源地圖庫。GIS前端渲染庫除了OpenLayers，還有Leaflet和ESRI公司的ArcGIS API, 可是相比較而言, OpenLayers的接受度和用戶羣更廣更多一些。 VectorMap.js就是在OpenLayers庫基礎上開發而來，使用WebGL 重寫了整個渲染部分，結合web worker的多線程優點，帶來更高性能的渲染體驗和交互體驗的同時，保留了OpenLayers強大的功能，可以協助開發人員快速進行地圖應用的開發。html

項目地址：https://github.com/ThinkGeo/V...前端

在線Sample : https://samples.thinkgeo.com/...git

Hello VectorMap.js
如今開始咱們的ThinkGeo VectorMap.js之旅，其總體用法延續了OpenLayers的API模式和開發習慣，若是具備OpenLayers原生庫開發經驗的話，上手仍是很是快的。閒話少說，咱們首先在頁面引入VectorMap.js腳本庫和樣式庫。github

<link rel="stylesheet" href="https://cdn.thinkgeo.com/vect...;></link>

<script src="https://cdn.thinkgeo.com/vect...;></script>
也能夠在GitHub找到VectorMap.js的release版本：web

https://github.com/ThinkGeo/V...json

執行上述引入腳本後，即建立了OpenLayers的ol對象和VectorMap.js自定義的ol.mapsuite對象，經過它能夠使用VectorMap.js的所有功能，包括OpenLayer原有全部功能。若是具備WebGL經驗的話，咱們會發現全部的矢量渲染都是基於WebGL完成的，包括距離測量和麪積測量等小工具。api

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運行，顯示地圖
修改保存以後點擊運行就能夠獲得一幅矢量地圖了，此過程可能會稍微有點長，要耐心多等一下子。