热力图

Heat Map

▶ 在线运行案例

你将学到什么

• Cesium Viewer 初始化
• Cesium Entity 高层 API
• Cesium 影像图层
• Cesium 动态材质属性
• 热力图可视化

效果说明

热力或密度可视化，通常把数值映射到颜色/高度。入口在 setCesiumHeatmap。

扩展功能 · Cesium.js

核心概念

• Viewer 封装地球、相机、图层；可关闭 animation/timeline 等 UI 精简界面。

• Entity 加点线面、模型、标签；适合业务对象与交互。

• ImageryLayer 叠加 XYZ/WMTS/ArcGIS 等底图，imageryLayers.add/remove 管理。

• MaterialProperty 支持 CallbackProperty 时间动态材质。

实现步骤

1. 初始化 Cesium.Viewer 与底图图层
2. 添加 Entity / Primitive / DataSource 等业务对象
3. 按需 camera.flyTo 定位视角

代码要点

• StoreClosure() — 案例中的独立逻辑模块，建议在线编辑器中跳转阅读
• Store() — 案例中的独立逻辑模块，建议在线编辑器中跳转阅读
• Canvas2dRendererClosure() — 案例中的独立逻辑模块，建议在线编辑器中跳转阅读
• Canvas2dRenderer() — 案例中的独立逻辑模块，建议在线编辑器中跳转阅读
• RendererClosure() — 案例中的独立逻辑模块，建议在线编辑器中跳转阅读
• HeatmapClosure() — 案例中的独立逻辑模块，建议在线编辑器中跳转阅读

源码

import {
    EllipsoidSurfaceAppearance,
    GeometryInstance,
    Material,
    Primitive,
    Rectangle,
    RectangleGeometry,
    SingleTileImageryProvider,
    ImageryLayer,
    ImageMaterialProperty,
    Entity
} from "cesium";
import * as Cesium from "cesium";

/* ----------------------------------------------------heatMap类----------------------------------------------- */
var HeatmapConfig = {
    defaultRadius: 40,
    defaultRenderer: "canvas2d",
    defaultGradient: {
        0.25: "rgb(0,0,255)",
        0.55: "rgb(0,255,0)",
        0.85: "yellow",
        1.0: "rgb(255,0,0)",
    },
    defaultMaxOpacity: 1,
    defaultMinOpacity: 0,
    defaultBlur: 0.85,
    defaultXField: "x",
    defaultYField: "y",
    defaultValueField: "value",
    plugins: {},
};
var Store = (function StoreClosure() {
    var Store = function Store(config) {
        this._coordinator = {};
        this._data = [];
        this._radi = [];
        this._min = 0;
        this._max = 1;
        this._xField = config["xField"] || config.defaultXField;
        this._yField = config["yField"] || config.defaultYField;
        this._valueField = config["valueField"] || config.defaultValueField;

        if (config["radius"]) {
            this._cfgRadius = config["radius"];
        }
    };

    var defaultRadius = HeatmapConfig.defaultRadius;

    Store.prototype = {
        // when forceRender = false -> called from setData, omits renderall event
        _organiseData: function (dataPoint, forceRender) {
            var x = dataPoint[this._xField];
            var y = dataPoint[this._yField];
            var radi = this._radi;
            var store = this._data;
            var max = this._max;
            var min = this._min;
            var value = dataPoint[this._valueField] || 1;
            var radius = dataPoint.radius || this._cfgRadius || defaultRadius;

            if (!store[x]) {
                store[x] = [];
                radi[x] = [];
            }

            if (!store[x][y]) {
                store[x][y] = value;
                radi[x][y] = radius;
            } else {
                store[x][y] += value;
            }

            if (store[x][y] > max) {
                if (!forceRender) {
                    this._max = store[x][y];
                } else {
                    this.setDataMax(store[x][y]);
                }
                return false;
            } else {
                return {
                    x: x,
                    y: y,
                    value: value,
                    radius: radius,
                    min: min,
                    max: max,
                };
            }
        },
        _unOrganizeData: function () {
            var unorganizedData = [];
            var data = this._data;
            var radi = this._radi;

            for (var x in data) {
                for (var y in data[x]) {
                    unorganizedData.push({
                        x: x,
                        y: y,
                        radius: radi[x][y],
                        value: data[x][y],
                    });
                }
            }
            return {
                min: this._min,
                max: this._max,
                data: unorganizedData,
            };
        },
        _onExtremaChange: function () {
            this._coordinator.emit("extremachange", {
                min: this._min,
                max: this._max,
            });
        },
        addData: function () {
// ... 完整源码见在线案例编辑器

小结

• 建议先在 案例编辑器 运行，再对照源码逐步修改参数加深理解
• 更多同类案例见 扩展功能目录

扩展功能 · Cesium.js