在Cesium中展示热力图heatmap_cesiumheatmap中文文档-CSDN博客

在Cesium中展示热力图heatmap

本文介绍如何在Cesium中展示热力图。目前比较常用的热力图插件是heatmap.js，实现的原理是使用heatmap.js生成热力图后，再将图贴到Cesium的相应位置。

准备工作：

首先下载heatmap.js插件，官网地址：https://www.patrick-wied.at/static/heatmapjs。
然后初始化Cesium，准备展示环境

主要步骤：

确定热力图画布的宽高
根据热力图显示的经纬度，将点映射到画布对应的位置，并创建热力点
初始化热力图对象h337，并设置热力点数据
创建Cesium对象，并将热力图贴到Cesium对象相应的位置

效果图：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>热力图</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <!--热力图官网 https://www.patrick-wied.at/static/heatmapjs/-->
    <script src="./js/heatmap.min.js"></script>
    <style>
        @import url(../Build/Cesium/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: absolute;
        }

        .div-heatmap {
            width: 600px;
            height: 400px;
            display: none;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<!--热力图容器-->
<div class="div-heatmap"></div>
<script>
    var points = [];
    var width = 600;
    var height = 400;
    var max = 100;

    // 热力图经纬度范围
    var latMin = 28.364807;
    var latMax = 40.251095;
    var lonMin = 94.389228;
    var lonMax = 108.666357;
    // 根据热力图图片范围，生成随机热力点和强度值
    for (var i = 0; i < 300; i++) {
        var lon = lonMin + Math.random() * (lonMax - lonMin);
        var lat = latMin + Math.random() * (latMax - latMin);
        var value = Math.floor(Math.random() * max);
        var point = {
            x: Math.floor((lat - latMin) / (latMax - latMin) * width),
            y: Math.floor((lon - lonMin) / (lonMax - lonMin) * height),
            value: value
        };
        points.push(point);
    }

    // 创建热力图
    var heatmapInstance = h337.create({
        container: document.querySelector('.div-heatmap')
    });

    var data = {
        max: max,
        data: points
    };
    heatmapInstance.setData(data);

    // 将热力图添加到球体上(生成的热力图canvas元素类名为heatmap-canvas)
    var canvas = document.getElementsByClassName('heatmap-canvas');

    // 更换默认Ion的accesstoken，初始化Cesium
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZjhlMzE4MS1iNTU1LTRmMWYtYjQ5MC03Nzg1YzMwNTAwMWMiLCJpZCI6MTk0MzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzU1Mjc1NDV9.PTf_VP102asNYU199ovMqgITS_2KCHtEP54TXLe7y5I';
    var viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,
        timeline: false
    });
    viewer.entities.add({
        name: 'heatmap',
        rectangle: {
            coordinates: Cesium.Rectangle.fromDegrees(lonMin, latMin, lonMax, latMax),
            material: new Cesium.ImageMaterialProperty({
                image: canvas[0],
                transparent: true
            })
        }
    });

    viewer.zoomTo(viewer.entities);
</script>
</body>
</html>