实现背景:
最近在搞气象数据的可视化,包括降雨、风速、湿度、气温等等的一系列结果可视化,后面会一一记录在本专栏中。这篇文章,主要讲如何实现热力图,针对温度进行可视化展示。
技术点:cesium + heatmap.js + tween.js
效果图:
针对青海流域的气象结果可视化,时间轴序列变化,解决了切换闪动的bug
具体实现:
我参考的网上大神写的heatmap.js,然后我自己封装了关于cesium的实现。直接贴代码
// heatmap.js
/*
* heatmap.js v2.0.0 | JavaScript Heatmap Library
*
* Copyright 2008-2014 Patrick Wied <heatmapjs@patrick-wied.at> - All rights reserved.
* Dual licensed under MIT and Beerware license
*
* :: 2015-07-19 15:42
*/
// Heatmap Config stores default values and will be merged with instance config
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 value = parseFloat(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 () {
if (arguments[0].length > 0) {
var dataArr = arguments[0];
var dataLen = dataArr.length;
while (dataLen--) {
this.addData.call(this, dataArr[dataLen]);
}
} else {
// add to store
var organisedEntry = this._organiseData(arguments[0], true);
if (organisedEntry) {
this._coordinator.emit("renderpartial", {
min: this._min,
max: this._max,
data: [organisedEntry],
});
}
}
return this;
},
setData: function (data) {
var dataPoints = data.data;
var pointsLen = dataPoints.length;
// reset data arrays
this._data = [];
this._radi = [];
for (var i = 0; i < pointsLen; i++) {
this._organiseData(dataPoints[i], false);
}
this._max = data.max;
this._min = data.min || 0;
this._onExtremaChange();
this._coordinator.emit("renderall", this._getInternalData());
return this;
},
removeData: function () {
// TODO: implement
},
setDataMax: function (max) {
this._max = max;
this._onExtremaChange();
this._coordinator.emit("renderall", this._getInternalData());
return this;
},
setDataMin: function (min) {
this._min = min;
this._onExtremaChange();
this._coordinator.emit("renderall", this._getInternalData());
return this;
},
setCoordinator: function (coordinator) {
this._coordinator = coordinator;
},
_getInternalData: function () {
return {
max: this._max,
min: this._min,
data: this._data,
radi: this._radi,
};
},
getData: function () {
return this._unOrganizeData();
} /*,
TODO: rethink.
getValueAt: function(point) {
var value;
var radius = 100;
var x = point.x;
var y = point.y;
var data = this._data;
if (data[x] && data[x][y]) {
return data[x][y];
} else {
var values = [];
// radial search for datapoints based on default radius
for(var distance = 1; distance < radius; distance++) {
var neighbors = distance * 2 +1;
var startX = x - distance;
var startY = y - distance;
for(var i = 0; i < neighbors; i++) {
for (var o = 0; o < neighbors; o++) {
if ((i == 0 || i == neighbors-1) || (o == 0 || o == neighbors-1)) {
if (data[startY+i] && data[startY+i][startX+o]) {
values.push(data[startY+i][startX+o]);
}
} else {
continue;
}
}
}
}
if (values.length > 0) {
return Math.max.apply(Math, values);
}
}
return false;
}*/,
};
return Store;
})();
var Canvas2dRenderer = (function Canvas2dRendererClosure() {
var _getColorPalette = function (config) {
var gradientConfig = config.gradient || config.defaultGradient;
var paletteCanvas = document.createElement("canvas");
var paletteCtx = paletteCanvas.getContext("2d", { willReadFrequently: true });
paletteCanvas.width = 256;
paletteCanvas.height = 1;
var gradient = paletteCtx.createLinearGradient(0, 0, 256, 1);
for (var key in gradientConfig) {
gradient.addColorStop(key, gradientConfig[key]);
}
paletteCtx.fillStyle = gradient;
paletteCtx.fillRect(0, 0, 256, 1);
return paletteCtx.getImageData(0, 0, 256, 1).data;
};
var _getPointTemplate = function (radius, blurFactor) {
var tplCanvas = document.createElement("canvas");
var tplCtx = tplCanvas.getContext("2d", { willReadFrequently: true });
var x = radius;
var y = radius;
tplCanvas.width = tplCanvas.height = radius * 2;
if (blurFactor == 1) {
tplCtx.beginPath();
tplCtx.arc(x, y, radius, 0, 2 * Math.PI, false);
tplCtx.fillStyle = "rgba(0,0,0,1)";
tplCtx.fill();
} else {
var gradient = tplCtx.createRadialGradient(
x,
y,
radius * blurFactor,
x,
y,
radius
);
gradient.addColorStop(0, "rgba(0,0,0,1)");
gradient.addColorStop(1, "rgba(0,0,0,0)");
tplCtx.fillStyle = gradient;
tplCtx.fillRect(0, 0, 2 * radius, 2 * radius);
}
return tplCanvas;
};
var _prepareData = function (data) {
var renderData = [];
var min = data.min;
var max = data.max;
var radi = data.radi;
var data = data.data;
var xValues = Object.keys(data);
var xValuesLen = xValues.length;
while (xValuesLen--) {
var xValue = xValues[xValuesLen];
var yValues = Object.keys(data[xValue]);
var yValuesLen = yValues.length;
while (yValuesLen--) {
var yValue = yValues[yValuesLen];
var value = data[xValue][yValue];
var radius = radi[xValue][yValue];
renderData.push({
x: xValue,
y: yValue,
value: value,
radius: radius,
});
}
}
return {
min: min,
max: max,
data: renderData,
};
};
function Canvas2dRenderer(config) {
var container = config.container;
var shadowCanvas = (this.shadowCanvas = document.createElement("canvas"));
var canvas = (this.canvas =
config.canvas || document.createElement("canvas"));
var renderBoundaries = (this._renderBoundaries = [10000, 10000, 0, 0]);
var computed = getComputedStyle(config.container) || {};
canvas.className = "heatmap-canvas";
this._width =
canvas.width =
shadowCanvas.width =
+computed.width.replace(/px/, "");
this._height =
canvas.height =
shadowCanvas.height =
+computed.height.replace(/px/, "");
this.shadowCtx = shadowCanvas.getContext("2d", { willReadFrequently: true });
this.ctx = canvas.getContext("2d", { willReadFrequently: true });
// @TODO:
// conditional wrapper
canvas.style.cssText = shadowCanvas.style.cssText =
"position:absolute;left:0;top:0;";
container.style.position = "relative";
container.appendChild(canvas);
this._palette = _getColorPalette(config);
this._templates = {};
this._setStyles(config);
}
Canvas2dRenderer.prototype = {
renderPartial: function (data) {
this._drawAlpha(data);
this._colorize();
},
renderAll: function (data) {
// reset render boundaries
this._clear();
this._drawAlpha(_prepareData(data));
this._colorize();
},
_updateGradient: function (config) {
this._palette = _getColorPalette(config);
},
updateConfig: function (config) {
if (config["gradient"]) {
this._updateGradient(config);
}
this._setStyles(config);
},
setDimensions: function (width, height) {
this._width = width;
this._height = height;
this.canvas.width = this.shadowCanvas.width = width;
this.canvas.height = this.shadowCanvas.height = height;
},
_clear: function () {
this.shadowCtx.clearRect(0, 0, this._width, this._height);
this.ctx.clearRect(0, 0, this._width, this._height);
},
_setStyles: function (config) {
this._blur = config.blur == 0 ? 0 : config.blur || config.defaultBlur;
if (config.backgroundColor) {
this.canvas.style.backgroundColor = config.backgroundColor;
}
this._opacity = (config.opacity || 0) * 255;
this._maxOpacity = (config.maxOpacity || config.defaultMaxOpacity) * 255;
this._minOpacity = (config.minOpacity || config.defaultMinOpacity) * 255;
this._useGradientOpacity = !!config.useGradientOpacity;
},
_drawAlpha: function (data) {
var min = (this._min = data.min);
var max = (this._max = data.max);
var data = data.data || [];
var dataLen = data.length;
// on a point basis?
var blur = 1 - this._blur;
while (dataLen--) {
var point = data[dataLen];
var x = point.x;
var y = point.y;
var radius = point.radius;
// if value is bigger than max
// use max as value
var value = Math.min(point.value, max);
var rectX = x - radius;
var rectY = y - radius;
var shadowCtx = this.shadowCtx;
var tpl;
if (!this._templates[radius]) {
this._templates[radius] = tpl = _getPointTemplate(radius, blur);
} else {
tpl = this._templates[radius];
}
// value from minimum / value range
// => [0, 1]
shadowCtx.globalAlpha = (value - min) / (max - min);
shadowCtx.drawImage(tpl, rectX, rectY);
// update renderBoundaries
if (rectX < this._renderBoundaries[0]) {
this._renderBoundaries[0] = rectX;
}
if (rectY < this._renderBoundaries[1]) {
this._renderBoundaries[1] = rectY;
}
if (rectX + 2 * radius > this._renderBoundaries[2]) {
this._renderBoundaries[2] = rectX + 2 * radius;
}
if (rectY + 2 * radius > this._renderBoundaries[3]) {
this._renderBoundaries[3] = rectY + 2 * radius;
}
}
},
_colorize: function () {
var x = this._renderBoundaries[0];
var y = this._renderBoundaries[1];
var width = this._renderBoundaries[2] - x;
var height = this._renderBoundaries[3] - y;
var maxWidth = this._width;
var maxHeight = this._height;
var opacity = this._opacity;
var maxOpacity = this._maxOpacity;
var minOpacity = this._minOpacity;
var useGradientOpacity = this._useGradientOpacity;
if (x < 0) {
x = 0;
}
if (y < 0) {
y = 0;
}
if (x + width > maxWidth) {
width = maxWidth - x;
}
if (y + height > maxHeight) {
height = maxHeight - y;
}
var img = this.shadowCtx.getImageData(x, y, width, height);
var imgData = img.data;
var len = imgData.length;
var palette = this._palette;
for (var i = 3; i < len; i += 4) {
var alpha = imgData[i];
var offset = alpha * 4;
if (!offset) {
continue;
}
var finalAlpha;
if (opacity > 0) {
finalAlpha = opacity;
} else {
if (alpha < maxOpacity) {
if (alpha < minOpacity) {
finalAlpha = minOpacity;
} else {
finalAlpha = alpha;
}
} else {
finalAlpha = maxOpacity;
}
}
imgData[i - 3] = palette[offset];
imgData[i - 2] = palette[offset + 1];
imgData[i - 1] = palette[offset + 2];
imgData[i] = useGradientOpacity ? palette[offset + 3] : finalAlpha;
}
Object.defineProperty(img, "data", {
value: imgData,
writable: true,
configurable: true,
enumerable: true,
});
// img.data = imgData;
this.ctx.putImageData(img, x, y);
this._renderBoundaries = [1000, 1000, 0, 0];
},
getValueAt: function (point) {
var value;
var shadowCtx = this.shadowCtx;
var img = shadowCtx.getImageData(point.x, point.y, 1, 1);
var data = img.data[3];
var max = this._max;
var min = this._min;
value = (Math.abs(max - min) * (data / 255)) >> 0;
return value;
},
getDataURL: function () {
return this.canvas.toDataURL();
},
};
return Canvas2dRenderer;
})();
var Renderer = (function RendererClosure() {
var rendererFn = false;
if (HeatmapConfig["defaultRenderer"] === "canvas2d") {
rendererFn = Canvas2dRenderer;
}
return rendererFn;
})();
var Util = {
merge: function () {
var merged = {};
var argsLen = arguments.length;
for (var i = 0; i < argsLen; i++) {
var obj = arguments[i];
for (var key in obj) {
merged[key] = obj[key];
}
}
return merged;
},
};
// Heatmap Constructor
var Heatmap = (function HeatmapClosure() {
var Coordinator = (function CoordinatorClosure() {
function Coordinator() {
this.cStore = {};
}
Coordinator.prototype = {
on: function (evtName, callback, scope) {
var cStore = this.cStore;
if (!cStore[evtName]) {
cStore[evtName] = [];
}
cStore[evtName].push(function (data) {
return callback.call(scope, data);
});
},
emit: function (evtName, data) {
var cStore = this.cStore;
if (cStore[evtName]) {
var len = cStore[evtName].length;
for (var i = 0; i < len; i++) {
var callback = cStore[evtName][i];
callback(data);
}
}
},
};
return Coordinator;
})();
var _connect = function (scope) {
var renderer = scope._renderer;
var coordinator = scope._coordinator;
var store = scope._store;
coordinator.on("renderpartial", renderer.renderPartial, renderer);
coordinator.on("renderall", renderer.renderAll, renderer);
coordinator.on("extremachange", function (data) {
scope._config.onExtremaChange &&
scope._config.onExtremaChange({
min: data.min,
max: data.max,
gradient:
scope._config["gradient"] || scope._config["defaultGradient"],
});
});
store.setCoordinator(coordinator);
};
function Heatmap() {
var config = (this._config = Util.merge(HeatmapConfig, arguments[0] || {}));
this._coordinator = new Coordinator();
if (config["plugin"]) {
var pluginToLoad = config["plugin"];
if (!HeatmapConfig.plugins[pluginToLoad]) {
throw new Error(
"Plugin '" +
pluginToLoad +
"' not found. Maybe it was not registered."
);
} else {
var plugin = HeatmapConfig.plugins[pluginToLoad];
// set plugin renderer and store
this._renderer = new plugin.renderer(config);
this._store = new plugin.store(config);
}
} else {
this._renderer = new Renderer(config);
this._store = new Store(config);
}
_connect(this);
}
// @TODO:
// add API documentation
Heatmap.prototype = {
addData: function () {
this._store.addData.apply(this._store, arguments);
return this;
},
removeData: function () {
this._store.removeData &&
this._store.removeData.apply(this._store, arguments);
return this;
},
setData: function () {
this._store.setData.apply(this._store, arguments);
return this;
},
setDataMax: function () {
this._store.setDataMax.apply(this._store, arguments);
return this;
},
setDataMin: function () {
this._store.setDataMin.apply(this._store, arguments);
return this;
},
configure: function (config) {
console.log('====================================')
console.log(config)
console.log('====================================')
this._config = Util.merge(this._config, config);
this._renderer.updateConfig(this._config);
this._coordinator.emit("renderall", this._store._getInternalData());
return this;
},
repaint: function () {
this._coordinator.emit("renderall", this._store._getInternalData());
return this;
},
getData: function () {
return this._store.getData();
},
getDataURL: function () {
return this._renderer.getDataURL();
},
getValueAt: function (point) {
if (this._store.getValueAt) {
return this._store.getValueAt(point);
} else if (this._renderer.getValueAt) {
return this._renderer.getValueAt(point);
} else {
return null;
}
},
};
return Heatmap;
})();
// core
var heatmapFactory = {
create: function (config) {
return new Heatmap(config);
},
register: function (pluginKey, plugin) {
HeatmapConfig.plugins[pluginKey] = plugin;
},
};
export default heatmapFactory;
自己参考的别人的一些代码,封装的cesiumHeatmap.js
// cesiumHeatmap.js
import { EllipsoidSurfaceAppearance, GeometryInstance, MaterialAppearance, Material, Primitive, Rectangle, RectangleGeometry, SingleTileImageryProvider, ImageryLayer, ImageMaterialProperty, Entity } from "cesium";
import h337 from './heatmap.js';
const Max = (arr) => {
let len = arr.length;
let max = -Infinity;
while (len--) {
max = arr[len] > max ? arr[len] : max;
}
return max;
};
const Min = (arr) => {
let len = arr.length;
let min = Infinity;
while (len--) {
min = arr[len] < min ? arr[len] : min;
}
return min;
};
/**
* 热度图
*/
export class CesiumHeatmap {
constructor(viewer, options) {
var _a, _b, _c;
this.bounds = [0, 0, 0, 0];
this.lastCameraHeight = 0;
this.initRadius = 40;
this.viewer = viewer;
this.initOptions = Object.assign({}, options);
if ((_a = this.initOptions) === null || _a === void 0 ? void 0 : _a.points) {
const bounds = this.getBounds(this.initOptions.points);
this.bounds = bounds;
const { container, width, height } = this.createContainer(bounds);
this.element = container;
this._width = width
this._height = height
const { datas, values } = this.handelPoints(this.initOptions.points)
this.handelHeateMap(datas, values)
}
}
// 拿到处理好的bounds
getHandelBounds() { return this.bounds }
// 获取创建的热力图材质
getMaterial() {
const url = this.heatmap.getDataURL();
return new MaterialAppearance({
material: new Material({
fabric: {
type: "Image",
uniforms: {
image: url,
},
},
})
})
}
getImageLayer() {
const url = this.heatmap.getDataURL();
return new SingleTileImageryProvider({
url: url,
rectangle: Rectangle.fromDegrees(...this.bounds),
});
}
// 数据更新拿到最新的热力图材质
updateMaterial(points) {
const { datas, values } = this.handelPoints(points)
this.handelHeateMap(datas, values)
}
// 根据参数的points 处理成热力图插件需要的格式
handelPoints(points) {
let datas = [], values = [], bounds = this.bounds, width = this._width, height = this._height
for (let i in points) {
const point = points[i];
const x = ((point.x - bounds[0]) / (bounds[2] - bounds[0])) * width; //屏幕坐标x
const y = ((bounds[3] - point.y) / (bounds[3] - bounds[1])) * height; //屏幕坐标y
const dataPoint = {
x: x,
y: y,
value: point.value,
};
if (typeof point.value === "number")
values.push(point.value);
datas.push(dataPoint);
}
return {
datas,
values
}
}
// 根据数据,heatmap插件重新处理生成canvas
handelHeateMap(datas, values) {
//数据的最大值和最小值
let _min, _max
if (this.initOptions.heatmapDataOptions && this.initOptions.heatmapDataOptions.min && this.initOptions.heatmapDataOptions.max) {
_min = this.initOptions.heatmapDataOptions.min;
_max = this.initOptions.heatmapDataOptions.max;
} else {
_min = values.length > 100000 ? Min(values) : Math.min(...values);
_max = values.length > 100000 ? Max(values) : Math.max(...values);
}
this.heatmapDataOptions = { min: _min, max: _max };
const data = {
max: _max,
min: _min,
data: datas,
};
const defaultOptions = {
maxOpacity: 0.9,
// radius: minRadius,
// minimum opacity. any value > 0 will produce
// no transparent gradient transition
minOpacity: 0.1,
gradient: {
// enter n keys between 0 and 1 here
// for gradient color customization
".3": "blue",
".5": "green",
".7": "yellow",
".95": "red",
},
};
const _options = this.initOptions.heatmapOptions
? Object.assign(Object.assign({}, defaultOptions), this.initOptions.heatmapOptions) : defaultOptions;
//初始化半径
if (this.heatmapOptions && this.heatmapOptions.radius) {
this.initRadius = this.heatmapOptions.radius;
}
this.heatmapOptions = Object.assign({}, _options);
const options = Object.assign(Object.assign({}, _options), { container: this.element });
this.heatmap = h337.create(options);
this.heatmap.setData(data);
}
getBounds(points) {
if (points) {
let lonMin = 180;
let lonMax = -180;
let latMin = 90;
let latMax = -180;
points.forEach(function (point) {
const { x: longitude, y: latitude } = point;
lonMin = longitude < lonMin ? longitude : lonMin;
latMin = latitude < latMin ? latitude : latMin;
lonMax = longitude > lonMax ? longitude : lonMax;
latMax = latitude > latMax ? latitude : latMax;
});
const xRange = lonMax - lonMin ? lonMax - lonMin : 1;
const yRange = latMax - latMin ? latMax - latMin : 1;
return [
lonMin - xRange / 10,
latMin - yRange / 10,
lonMax + xRange / 10,
latMax + yRange / 10,
];
}
return [0, 0, 0, 0];
}
createContainer(bounds) {
const container = document.createElement("div");
const width = 1000;
const height = parseInt(((1000 / (bounds[2] - bounds[0])) * (bounds[3] - bounds[1])).toFixed(0));
container.setAttribute("style", `width:${width}px;height:${height}px;display:none;`);
document.body.appendChild(container);
return { container, width, height };
}
}
vue代码层面实现:
// vue文件
// 引入工具js
import { CesiumHeatmap } from "@/utils/heatmap/cesiumHeatmap.js"
import * as TWEEN from '@tweenjs/tween.js'
// 调用CesiumHeatmap类
let tempInstance = new CesiumHeatmap(viewer, {
points: points, // 处理好的点位数据
})
// 调用实例的getImageLayer方法,拿到layer,直接添加到viewer
let providerTemp = viewer.imageryLayers.addImageryProvider(tempInstance.getImageLayer())
// 更新方法:
// 我这里是时间轴序列变化,所以我用的tween.js做的渐变切换
tempInstance.updateMaterial(tempPoints) // tempPoints是更新后的点位数据
let nextLayer = viewer.imageryLayers.addImageryProvider(tempInstance.getImageLayer())
var currentLayerAnimation = new TWEEN.Tween(providerTemp).to({ alpha: 0 }, 800).start()// 隐藏当前的
var nextLayerAnimation = new TWEEN.Tween(nextLayer).to({ alpha: 1 }, 800).start().delay(800).onComplete(() => {
viewer.imageryLayers.remove(providerTemp);
providerTemp = nextLayer
})
// 循环渲染动画
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
}
animate();