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