成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

MiracleWong / 2642人閱讀

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

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

作為一個專為Web GIS客戶端項(xiàng)目提供的開源JavaScript類庫包，OpenLayers用于實(shí)現(xiàn)對于標(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 重寫了整個渲染部分，結(jié)合web worker的多線程優(yōu)勢，帶來更高性能的渲染體驗(yàn)和交互體驗(yàn)的同時，保留了OpenLayers強(qiáng)大的功能，能夠協(xié)助開發(fā)人員快速進(jìn)行地圖應(yīng)用的開發(fā)。

項(xiàng)目地址：https://github.com/ThinkGeo/V...

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

Hello VectorMap.js
現(xiàn)在開始我們的ThinkGeo VectorMap.js之旅， 其整體用法延續(xù)了OpenLayers的API模式和開發(fā)習(xí)慣，如果具有OpenLayers原生庫開發(fā)經(jīng)驗(yàn)的話，上手還是非?？斓?。閑話少說， 我們首先在頁面引入VectorMap.js腳本庫和樣式庫。



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

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

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

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

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

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

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

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

1.2開始第一個VectorMap.js程序

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

”, 如下：


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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104156.html

相關(guān)文章

  • 常用的數(shù)據(jù)可視化工具

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

    philadelphia 評論0 收藏0

  • CAD小白初入門該怎么進(jìn)行階段性學(xué)習(xí)CAD？

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

    Aomine 評論0 收藏0

  • 9個設(shè)計師常用的高清圖庫 不敢配圖？ 這9個免版權(quán)圖庫牢記心中！

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

    AdolphLWQ 評論0 收藏0

  • 9個設(shè)計師常用的高清圖庫 不敢配圖？ 這9個免版權(quán)圖庫牢記心中！

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

    mj 評論0 收藏1

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<