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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库