在cesium中实现热力图

    刚开始接触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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页