C1——cesium用geojson生成熱力圖

geojson生成熱力圖cesium加載

效果圖:

轉載至:http://blog.sina.com.cn/s/blog_15e866bbe0102yysr.html

先說原理:創建canvas,遍歷json文件中的座標生成熱點,把生成的圖片弄到canvas上。

上面那位博主的js文件已經做了封裝,我們就直接用不用管其他的。但是由於開啓了深度檢測,導致熱力圖生成了,但被後加載的地圖影像圖覆蓋,

<div class="cesium-widget">
    <canvas width="1304" height="665" style="image-rendering: pixelated;"></canvas>
</div>

.cesium-widge的div是自動生成的,手動將的z-index=-1;你會看到熱力圖有出來了。但是點擊和拖拽等交互事件都被canvas阻擋。

查找原因:canvas生成時默認是在最上面,但由於地圖影像圖加載較慢就會出現canvas上面。

解決辦法:關掉深度拾取viewer.scene.globe.depthTestAgainstTerrain = false;//深度拾取

 

對於那位博主的json數據格式是geojson的。需要保證wgs84座標,如下幾個畫圈的地方要一致的。

再來說說生成的熱力圖爲空的問題:

1、CesiumHeatmapGL.js中筆者對熱力點的大小以及發光強度規定爲20和0.05;我用自己的數據生成的就是空的原因就是size太小。所以自己做了一些修改頁面上傳入size過來。

2、熱力點的座標,因爲是canvas上畫的座標原點在左上角,筆者的xy座標生成的算法不太好理解。我改成了y = (extent.yMax-feature.geometry.coordinates[1])/(extent.yMax-extent.yMin)*heatmapcanvas.clientHeight;

3、對於size大小以及發光強度,我覺得應該由json文件的某個屬性決定才比較有意義。所以我進一步修改了代碼。但通用性不強因爲不同的項目需求不一樣。耶不好專門設定一個屬性值,就不放代碼了。

代碼壓縮上傳了也不知道在哪裏看得到?

感謝cumtzheNo1的博客

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章