剛開始接觸cesium,說實話,對於像我這類的小白來說,要想快速上手,確實有一定的難度,但是站在巨人的肩膀上,往往總會少走很多彎路。
原理:使用heatmap.js插件,先生成一個熱力圖,再在地圖上創建一個盒子(如矩形),以紋理的形式把熱力圖填充到矩形中。
1、首先下載heatmap.js插件,自己隨意寫了一個熱力圖的方法,傳入熱力圖所需參數max和data
// 創建熱力圖 function createHeatMap(max, data) { // 創建元素 var heatDoc = document.createElement("div"); heatDoc.setAttribute("style", "width:1000px;height:1000px;margin: 0px;display: none;"); document.body.appendChild(heatDoc); // 創建熱力圖對象 var heatmap = h337.create({ container: heatDoc, radius: 20, maxOpacity: .5, minOpacity: 0, blur: .75, gradient: { '0.9':'red', '0.8':'orange', '0.7':'yellow', '0.5':'blue', '0.3':'green', }, }); // 添加數據 heatmap.setData({ max: max, data: data }); return heatmap; }
2、創建一個cesium視圖對象
var viewer = new Cesium.Viewer("viewer");
3、在之前建的cesium視圖中,創建一個矩形(也可是橢圓、正方形、多邊形等),在矩形內以紋理的形式填充,自己隨意封裝了一個方法
// 創建正方形 綁定熱力圖 function createRectangle(viewer, coordinate, heatMap) { viewer.entities.add({ name: 'Rotating rectangle with rotating texture coordinate', show: true, rectangle: { coordinates: Cesium.Rectangle.fromDegrees(coordinate[0], coordinate[1], coordinate[2], coordinate[3]), material: heatMap._renderer.canvas // 核心語句,填充熱力圖 } }); }
4、隨意生成多個點數據
// 生成len個隨機數據 function getData(len) { //構建一些隨機數據點 var points = []; var max = 0; var width = 1000; var height = 1000; while (len--) { var val = Math.floor(Math.random() * 1000); max = Math.max(max, val); var point = { x: Math.floor(Math.random() * width), y: Math.floor(Math.random() * height), value: val }; points.push(point); } return {max: max, data: points} }
5、使用上述方法,則生成熱力圖
// 第一個熱力圖 var coordinate1 = [-109.0, 10.0, -80.0, 35.0]; var heatMap1 = createHeatMap(getData(1000).max, getData(1000).data); creatRectangle(viewer, coordinate1, heatMap1); // 第二個熱力圖 var coordinate2 = [-109.0, 30.0, -80.0, 41.0]; var heatMap2 = createHeatMap(getData(3000).max, getData(3000).data); creatRectangle(viewer, coordinate2, heatMap2); // 第三個熱力圖 var coordinate3 = [-109.0, 41.0, -80.0, 50.0]; var heatMap3 = createHeatMap(getData(5000).max, getData(5000).data); creatRectangle(viewer, coordinate3, heatMap3);
6、效果如下,因爲數據都是隨意添加的,所以效果不好,但是可以體現出能在cesium中實現熱力圖
ps:此文章僅供參考,大神勿噴
參考來源:https://blog.csdn.net/u013929284/article/details/71928173