成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

MiracleWong / 2695人閱讀

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

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://github.com/ThinkGeo/V...

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

Hello VectorMap.js
現(xiàn)在開始我們的ThinkGeo VectorMap.js之旅， 其整體用法延續(xù)了OpenLayers的API模式和開發(fā)習慣，如果具有OpenLayers原生庫開發(fā)經驗的話，上手還是非?？斓?。閑話少說， 我們首先在頁面引入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運行，顯示地圖
修改保存之后點擊運行就可以得到一幅矢量地圖了，此過程可能會稍微有點長，要耐心多等一會兒。

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

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

相關文章

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

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

    philadelphia 評論0 收藏0

  • CAD小白初入門該怎么進行階段性學習CAD？

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

    Aomine 評論0 收藏0

  • 9個設計師常用的高清圖庫 不敢配圖？ 這9個免版權圖庫牢記心中！

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

    AdolphLWQ 評論0 收藏0

  • 9個設計師常用的高清圖庫 不敢配圖？ 這9個免版權圖庫牢記心中！

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

    mj 評論0 收藏1

發(fā)表評論

0條評論

閱讀需要支付1元查看
<