溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

VectorMap.js 矢量化地圖庫 – 快速入門

發(fā)布時間：2020-08-10 13:04:10 來源：ITPUB博客 閱讀：152 作者：apoffice 欄目：web開發(fā)

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

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

項目地址 ： https:// torMap-js https:// oud/ https:// torMap-js/releases

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

  1. 1申請ThinkGeo Cloud Access Key

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

VectorMap.js 矢量化地圖庫 – 快速入門

言歸正傳，首先訪問  https://cloud.thinkgeo.com  , 如果沒有注冊用戶，請點擊“Try It Free”，進行注冊，如果已有賬號請自行直接登錄。 流程如下。

  • 在主界面點擊 “Try It Free”

VectorMap.js 矢量化地圖庫 – 快速入門

  • 輸入有效的用戶名密碼后點擊 “Register”, 完成注冊。

VectorMap.js 矢量化地圖庫 – 快速入門

  • 登錄，登錄后點擊”Create a client key”, 然后獲取API Key

VectorMap.js 矢量化地圖庫 – 快速入門 VectorMap.js 矢量化地圖庫 – 快速入門

1.2開始第一個VectorMap.js程序

啟動Visual Studio Code, 創(chuàng)建一個”index.html”, 引入之前提到的VectorMap.js腳本庫和樣式庫后， 在”<body>”標簽中添加地圖載體”<div>”, 如下： 

<div id="map" style="width:800px;height:600px;"></div>

然后在html頁面添加如下JavaScript代碼，進行地圖資源的加載和渲染顯示。 

<script>
    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,
        }),
    });</script>

注意 ： 在代碼中“your-ThinkGeo-Cloud-Service-Key”, 將其替換為自己剛剛申請的 API Key.

  1. 3運行，顯示地圖

修改保存之后點擊運行就可以得到一幅矢量地圖了，此過程可能會稍微有點長，要耐心多等一會兒。

VectorMap.js 矢量化地圖庫 – 快速入門


向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手