如何破坏heatmap.js实例?

时间:2015-02-23 07:49:56

标签: javascript jquery heatmap

我正在使用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。

3 个答案:

答案 0 :(得分:7)

目前没有方法可以销毁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;

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

您可以将此函数添加到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);
        }
    }
};