Cesium實現熱力圖繪制

這次介紹在Cesium上如何繪制熱力圖,現在比較常用的熱力圖插件是heatmap.js,但是它僅僅提供了對leaflet,openlayers等二維地圖的插件,本想通過在這些二維地圖上出圖然后再三維球上加載,但是發現數據可是并不兼容。通過摸索發現了個支持Cesium的熱力圖插件HeatmapImageryProvider.js,下載地址為:https://www.npmjs.com/package/cesium-heatmap,下面詳細介紹一下如何在Cesium上整合這個插件并實現熱力圖的繪制:
1)首先將HeatmapImageryProvider.js中define到return部分的代碼(不要帶上最后的heatmap.js的源碼)復制到Cesium源碼中define的定義與cesium的定義之間,如下所示,是define的定義,將復制的代碼之后插入在這后面即可:

define = function (name, deps, callback) {
        if (typeof name !== 'string') {
            throw new Error('See almond README: incorrect module build, no module name');
        }
        //This module may not have dependencies
        if (!deps.splice) {
            //deps is not an array, so probably means
            //an object literal or factory function for
            //the value. Adjust args.
            callback = deps;
            deps = [];
        }
        if (!hasProp(defined, name) && !hasProp(waiting, name)) {
            waiting[name] = [name, deps, callback];
        }
    };
    define.amd = {
        jQuery: true
    };
}());

2)將'./Scene/HeatmapImageryProvider'插入至define('Cesium',[那一行的第一個形式參數define('Cesium',['./Scene/HeatmapImageryProvider'將'Scene_HeatmapImageryProvider' 插入至后面函數對應的實參位置,也是第一個function(Scene_HeatmapImageryProvider,Core_appendForwardSlash, Core_arrayFill
3)將Cesium['HeatmapImageryProvider'] = Scene_HeatmapImageryProvider;添加到對Cesium申明的那一行后面:

4)確保在加載Cesium.js之前要先加載heatmap.js
調用的效果如下所示:
由于本人對Cesium的源碼沒有深入研究,因此只能這樣依樣畫葫蘆的使用一下,其中原理還有待深入了解,歡迎大家交流討論!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容