如何销毁 heatmap.js 个实例？

Question

我正在使用 patrick wied's heatmapjs。我想知道如何销毁实例并删除由 h337.create(configObject) 函数创建的 canvas div。

示例：

var config = {
  container: document.getElementById('heatmapContainer'),
  radius: 10
};
var config2 = {
  container: document.getElementById('heatmapContainer'),
  radius: 5
};
var heatmapInstance1 = h337.create(config);
var heatmapInstance2 = h337.create(config);
var heatmapInstance3 = h337.create(config2);

我只想为 heatmapInstance1 个实例销毁和删除 canvas div。

Answer 1

目前没有销毁 heatmapjs 实例的方法，但我们可以手动完成。

首先，我们必须从 DOM 中删除 canvas 元素，然后取消设置或销毁 heatmapjs 实例。

示例：

//find corresponding canvas element
var canvas = heatmapInstance1._renderer.canvas;
//remove the canvas from DOM
$(canvas).remove();
//than unset the variable
heatmapInstance1 = undefined;
//or
heatmapInstance1 = null;

Answer 2

如果您使用的是 React 组件，那么在将新数据动态发送到热图组件时，您可能必须在 componentWillReceiveProps(newProps) 中执行此操作。

this.heatmap._renderer.canvas.remove()
this.heatmap = Heatmap.create({container: ReactDOM.findDOMNode(this)})
this.setData(newProps.max, newProps.data);

Answer 3

您可以将此功能添加到 CesiumHeatmap.js 并使用它来清除热图：

CHInstance.prototype.deleteLayer = function () {
    if (CesiumHeatmap.defaults.useEntitiesIfAvailable && this._cesium.entities) {
        if (this._layer) {
            this._cesium.entities.remove(this._layer);
        }
    } else {
        if (this._layer) {
            this._cesium.scene.imageryLayers.remove(this._layer);
        }
    }
};

如何销毁 heatmap.js 个实例？

How to destroy heatmap.js instance?

javascript

jquery

heatmap