在cesium中實現熱力圖

山野裡的小菊花發表於2018-06-14

    剛開始接觸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

相關文章