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 图层

```javascript

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