cesium 图层构建的那些事 （十二）

我们这次来构建热力图

热力图定义参数

export interface PHeatMapRenderer {
type: string;
radius: number;
colorStops: Array<{ color: string, ratio: number }>,
blur?: number;
maxValue: number;
minValue: number;
maxOpacity?: number;
minOpacity?: number;
}

export interface PHeatMap {
name: string;
source: Array<{ x: number, y: number, value: number }>;
renderer: PHeatMapRenderer
}
构建heatmap 渲染器

export class HeatMapRenderer {
type=“HeatMapRenderer”;
public renderer:any;
constructor(renderer:any) {
super();
this.renderer = renderer;
}

getSymbol(value: number) {
throw new Error(‘Method not implemented.’);
}

getH337Option(container:any){
const { radius=30, maxOpacity=1, minOpacity=1,blur=0.85 } = this.renderer
const gradient = this.getGradient();
return {container, radius, maxOpacity, minOpacity,blur,gradient};
}
getData(source:Array<{x:number,y:number,value:number}>,extent:any,width:number,height:number):any{
const data = source.map((item) => {
var x:number = ((item.x - extent.xMin) / (extent.xMax - extent.xMin) * width);
var y:number = (-(item.y - extent.yMin) / (extent.yMax - extent.yMin) + 1) * height;
x = parseFloat(x.toFixed(2));
y = parseFloat(y.toFixed(2));
return { x, y, value: item.value }
});
const max = this.renderer.maxValue || 1;
const min = this.renderer.minValue || 0;
return {max,min,data }
}

private getGradient(){
if(!this.renderer.colorStops){
return {
‘.3’: ‘blue’,
‘.5’: ‘green’,
‘.7’: ‘yellow’,
‘.95’: ‘red’
}
}
const result:any = {};
for(const item of this.renderer.colorStops){
result[item.ratio+""] = item.color;
}
return result;
}

}
构建heatmap 图层

import {Layer} from "./Layer";
import {HeatMapRenderer} from "./HeatMapRenderer";
import {PHeatMap} from "./PHeatMap";
import {PHeatMapRenderer} from "./PHeatMapRenderer";

export class HeatMap extends Layer{
private renderer: HeatMapRenderer;
private extent: any;
private source: Array;
constructor(option: PHeatMap) {
super(option.name);
this.source = option.source;
this.renderer = new HeatMapRenderer(option.renderer);
this.render();
}

setSource(source: Array<{x:number,y:number,value:number}>) {
this._removeByMap(true);
this.source = source;
this.render();
 更多参考https://xiaozhuanlan.com/topic/6839472051