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

MiracleWong 發布于2019-08-23 17:19 / 2604人閱讀

摘要：注意在代碼中將其替換為自己剛剛申請的運行，顯示地圖修改保存之后點擊運行就可以得到一幅矢量地圖了，此過程可能會稍微有點長，要耐心多等一會兒。

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/V...

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

Hello VectorMap.js
現在開始我們的ThinkGeo VectorMap.js之旅，其整體用法延續了OpenLayers的API模式和開發習慣，如果具有OpenLayers原生庫開發經驗的話，上手還是非常快的。閑話少說，我們首先在頁面引入VectorMap.js腳本庫和樣式庫。

也可以在GitHub找到VectorMap.js的release版本：

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

執行上述引入腳本后，即創建了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腳本庫和樣式庫后，在””標簽中添加地圖載體”

”, 如下：

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

云服務器 GPU云服務器免費高清矢量圖庫前端快速入門云計算快速入門 css快速入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104156.html

常用的數據可視化工具

摘要：俗話說，不會使用工具來完成任務的都是進化不完全的表現，大數據時代，可視化已經深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結下當下可視化工具都有哪些。是一個地圖庫，主要面向數據可視化用戶。俗話說，不會使用工具來完成任務的都是進化不完全的表現，大數據時代，可視化已經深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結下當下可視化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 評論0 收藏0
CAD小白初入門該怎么進行階段性學習CAD？

摘要：三學以致用在學習命令時始終要與實際應用相結合，把學以致用的原則貫穿整個學習過程。五循序漸進整個學習過程其實就是循序漸進的方式。 CAD小白初入門該怎么進行階段性學習CAD？現在隨著CAD的各種應用的普及，不管是建筑加工還是機械制造，都會運用得比較多，那么新手小白到底該如何學好CAD，進階大神？下面小編就總結了幾點，希望可以對大家有所用處哦！showImg(https://segment...

Aomine 2019-07-01 12:39 評論0 收藏0
9個設計師常用的高清圖庫不敢配圖？這9個免版權圖庫牢記心中！

摘要：二網址提供個人和免費商用的圖像，圖片質量非常高。五網址超過億張高清圖片，可以按照顏色查找的免費高質量圖片中心。九網址適合平面設計師和網頁設計師使用的圖片素材，注冊后可免費下載，個人和商業使用全部免費。一.pexels 提供大量高清尺寸，品質優良的攝影圖片，所有圖片都可以免費商用。網址：www.pexels.com 最好的免費圖片在一個叫pexels的地方，Pexels是使用的高質量照片庫的平...

AdolphLWQ 2019-04-23 11:40 評論0 收藏0
9個設計師常用的高清圖庫不敢配圖？這9個免版權圖庫牢記心中！

摘要：二網址提供個人和免費商用的圖像，圖片質量非常高。五網址超過億張高清圖片，可以按照顏色查找的免費高質量圖片中心。九網址適合平面設計師和網頁設計師使用的圖片素材，注冊后可免費下載，個人和商業使用全部免費。一.pexels 提供大量高清尺寸，品質優良的攝影圖片，所有圖片都可以免費商用。網址：www.pexels.com 最好的免費圖片在一個叫pexels的地方，Pexels是使用的高質量照片庫的...

mj 2019-04-22 16:12 評論0 收藏1