我們這次來構建熱力圖
熱力圖定義參數(shù)
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
