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文件的某個屬性決定才比較有意義。所以我進一步修改了代碼。但通用性不強因爲不同的項目需求不一樣。耶不好專門設定一個屬性值,就不放代碼了。
代碼壓縮上傳了也不知道在哪裏看得到?