基于Cesium實(shí)現(xiàn)加載顯示熱力圖
我是一個(gè)小白,到目前為止對(duì)于3D方面的東西不是特別的懂,所以說(shuō),對(duì)于cesium使用的并不是特別的好,可以說(shuō)根本不會(huì)吧,所以說(shuō)也是在一點(diǎn)一點(diǎn)摸索,一點(diǎn)一點(diǎn)學(xué)習(xí)的過(guò)程中,所以說(shuō)有些博文寫(xiě)的可能不是準(zhǔn)確的,只是用來(lái)記錄一下學(xué)習(xí)過(guò)程,錯(cuò)了別噴我?。。?/p>
CesiumHeatmap
首先嘞,繪制熱力圖需要有一個(gè)工具,就是使用 CesiumHeatmap 這個(gè)工具,然后呢,下面是他的一個(gè)github的地址。
CesiumHeatmap 【時(shí)空門(mén)~ 嗖~】
下載下來(lái)放到項(xiàng)目里面就可以了。
我把他放到了這里面嘞。
然后在項(xiàng)目里面引入一下。
<script src="./CesiumHeatmap/CesiumHeatmap.js"></script>
編寫(xiě)案例
// 測(cè)試熱力圖 function addHeatMap() { let bounds = { west: 106.243911, east: 106.270811, south: 29.244545, north: 29.289995, }; let heatMap = CesiumHeatmap.create( viewer, // your cesium viewer bounds, // bounds for heatmap layer { // heatmap.js options go here // maxOpacity: 0.3 gradient: { // the gradient used if not given in the heatmap options object '.3': '#d9e7fc', '.65': '#2a7aed', '.8': '#fbd801', '.95': '#18c3a1' }, }, ); let data = [ { x: 106.254153, y: 29.2883939, value: 76 }, { x: 106.2654284, y: 29.2854935, value: 63 }, { x: 106.265005, y: 29.284573, value: 1 }, { x: 106.264001, y: 29.283456, value: 21 }, { x: 106.263219, y: 29.282181, value: 28 }, { x: 106.262788, y: 29.279673, value: 41 }, { x: 106.2632087, y: 29.2742665, value: 75 }, { x: 106.2505158, y: 29.28138, value: 76 }, { x: 106.2531094, y: 29.2833591, value: 100 }, { x: 106.2531093, y: 29.2844560, value: 80 }, { x: 106.253293, y: 29.284826, value: 1 }, { x: 106.250099, y: 29.285638, value: 21 }, { x: 106.2469149, y: 29.2864109, value: 28 }, { x: 106.254119, y: 29.276274, value: 41 }, ]; let valueMin = 0; let valueMax = 50; heatMap.setWGS84Data(valueMin, valueMax, data); viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(106.254153, 29.2742665, 2e3), orientation: { heading: Cesium.Math.toRadians(0.0), pitch: Cesium.Math.toRadians(-90.0), roll: 0.0, }, }); }
效果就是這個(gè)樣子。
以上就是基于Cesium實(shí)現(xiàn)加載顯示熱力圖的詳細(xì)內(nèi)容,更多關(guān)于Cesium顯示熱力圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Uni-App用uView組件庫(kù)中u-picker實(shí)現(xiàn)地區(qū)的省-市-區(qū)三級(jí)聯(lián)動(dòng)、確認(rèn)及回顯
最近項(xiàng)目要使用uni-app遇到省市縣三級(jí)聯(lián)動(dòng)的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Uni-App用uView組件庫(kù)中u-picker實(shí)現(xiàn)地區(qū)的省-市-區(qū)三級(jí)聯(lián)動(dòng)、確認(rèn)及回顯的相關(guān)資料,需要的朋友可以參考下2023-12-12用瀑布流的方式在網(wǎng)頁(yè)上插入圖片的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇用瀑布流的方式在網(wǎng)頁(yè)上插入圖片的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09實(shí)例詳解JavaScript中setTimeout函數(shù)的執(zhí)行順序
關(guān)于javascript的運(yùn)行機(jī)制大家都應(yīng)該有所了解了吧,其實(shí)javascript是一個(gè)單線程的機(jī)制,但是因?yàn)殛?duì)列的關(guān)系它的表現(xiàn)會(huì)讓我們感覺(jué)是一個(gè)多線程的錯(cuò)覺(jué)。下面這篇文章通過(guò)實(shí)例主要給大家介紹了關(guān)于JavaScript中setTimeout函數(shù)執(zhí)行順序的相關(guān)資料,需要的朋友可以參考下。2017-07-07JS實(shí)現(xiàn)判斷移動(dòng)端PC端功能
這篇文章主要介紹了JS實(shí)現(xiàn)判斷移動(dòng)端PC端功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02jquery自定義插件結(jié)合baiduTemplate.js實(shí)現(xiàn)異步刷新(附源碼)
本文主要介紹了jquery自定義插件結(jié)合baiduTemplate.js實(shí)現(xiàn)異步刷新的具體實(shí)例,具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12JS實(shí)現(xiàn)給數(shù)組對(duì)象排序的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)給數(shù)組對(duì)象排序的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組對(duì)象排序相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2019-06-06IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]
長(zhǎng)久以來(lái)JavaScript兼容性一直是Web開(kāi)發(fā)者的一個(gè)主要問(wèn)題。在正式規(guī)范、事實(shí)標(biāo)準(zhǔn)以及各種實(shí)現(xiàn)之間的存在的差異讓許多開(kāi)發(fā)者日夜煎熬2011-10-10js+canvas實(shí)現(xiàn)可自動(dòng)吸附閉合的鼠標(biāo)繪制多邊形
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)可自動(dòng)吸附閉合的鼠標(biāo)繪制多邊形,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07JSCode all of Brower 全局屏蔽網(wǎng)頁(yè)右鍵功能 具體實(shí)現(xiàn)
JSCode all of Brower 全局屏蔽網(wǎng)頁(yè)右鍵功能 具體實(shí)現(xiàn),需要的朋友可以參考一下2013-06-06js 實(shí)現(xiàn)watch監(jiān)聽(tīng)數(shù)據(jù)變化的代碼
這篇文章主要介紹了js 實(shí)現(xiàn)watch監(jiān)聽(tīng)數(shù)據(jù)變化的代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10