标签：canvas const option color 十六 ctx let cesium 图层

今天我们来讲下聚合图层

首先我们定义参数

export enum ECluserLayerType {
circle = 0,
shine = 1,
image = 2,//未实现
}

interface ClusterColor {
value: number,
color: string
}

export interface PBaseCluserLayer {
enabled?: boolean,// 开启聚集统计
pixelRange?: number,// 获取或设置像素范围以扩展屏幕空间边界框。
minimumClusterSize?: number,//获取或设置可以集群的最小屏幕空间对象数
cluster?: {
type: ECluserLayerType,//聚集时候展示的类型
label?: {
size?: number,
color?: string,
font?: string
}
colors?: Array,//必须从大到小
image?: String//如果type是image,则必须填写图片地址image
}

}
聚合辅助类

import {ECluserLayerType, PBaseCluserLayer} from "./PBaseCluserLayer";

export class ClusterType {
private static cache: any = {};

static getCluserImage(option: any, entities: any) {
if (option.type === ECluserLayerType.circle) {
return this.drawCircle(option, entities);
} else if (option.type === ECluserLayerType.shine) {
return this.drawShine(option, entities);
} else if (option.type === ECluserLayerType.image) {
} else {
throw new Error("类型无法识别：" + option.type);
}
}
 
private static drawCircle(option: any, entities: any) {
let labelSize = option.label.size;
const labelColor = option.label.color;
const labelFont = option.label.font;
const num = entities.length;
let diameter = labelSize * (String(num).length + 1);
let color: string = "";
let scale: number = 1;
const len = option.colors.length;
for (let index = len - 1; index >= 0; index--) {
var item = option.colors[index];
if (num >= item.value) {
color = item.color;
scale = (len - index) / len;
break;
}
}
diameter -= diameter * scale / 3;
labelSize -= labelSize * scale / 3;
const key = color + "-" + num + diameter + labelSize + labelColor + labelFont;
let canvas: any = this.cache[key];
if (!canvas) {
canvas = document.createElement('canvas')
canvas.width = canvas.height = diameter;
const ctx: any = canvas.getContext('2d');
const center = diameter / 2;
ctx.translate(center, center);
ctx.save();
ctx.beginPath()
ctx.globalAlpha = .5;
ctx.fillStyle = color;
ctx.arc(0, 0, center, 0, 2 * Math.PI)
ctx.closePath()
ctx.fill()
ctx.beginPath()
ctx.globalAlpha = 0.9;
ctx.fillStyle = color;
ctx.arc(0, 0, center * 0.7, 0, 2 * Math.PI);
ctx.fill()
ctx.closePath();
ctx.globalAlpha = 1;
ctx.fillStyle = labelColor;
ctx.font = `${labelSize}px ${labelFont}`;
ctx.fillText(String(num), -(diameter - labelSize * 0.85) / 4, labelSize / 2 - labelSize / 10);
ctx.restore()
canvas = this.cache[key] = canvas.toDataURL()
}
return canvas
}
 
private static drawShine(option: any, entities: any) {
let labelSize = option.label.size;
const labelColor = option.label.color;
const labelFont = option.label.font;
const num = entities.length;
let diameter = labelSize * (String(num).length + 1);
let color: string = "";
let scale: number = 1;
const len = option.colors.length;
for (let index = len - 1; index >= 0; index--) {
var item = option.colors[index];
if (num >= item.value) {
color = item.color;
scale = (len - index) / len;
break;
}
}
diameter -= diameter * scale / 3;
labelSize -= labelSize * scale / 3;
const key = color + "-" + num + diameter + labelSize + labelColor + labelFont;
let canvas: any = this.cache[key];
if (!canvas) {
canvas = document.createElement('canvas')
canvas.width = canvas.height = diameter;
const ctx: any = canvas.getContext('2d');
const center = diameter / 2;
ctx.translate(center, center);
ctx.save();
ctx.beginPath()
ctx.globalAlpha = 1;
ctx.fillStyle = color;
ctx.arc(0, 0, center * 0.6, 0, 2 * Math.PI);
ctx.closePath()
ctx.fill()
ctx.closePath();
ctx.lineWidth = center * 0.1;
let startAngle = -Math.PI / 12
let angle = Math.PI / 2
let intervalAngle = Math.PI / 6
for (let i = 0; i < 3; i++) {
ctx.beginPath()
ctx.globalAlpha = 0.6;
ctx.strokeStyle = color;
ctx.arc(0, 0, center * 0.75, startAngle, startAngle + angle, false);
ctx.stroke();
ctx.closePath();
ctx.beginPath()
ctx.globalAlpha = 0.2;
ctx.arc(0, 0, center * 0.9, startAngle, startAngle + angle, false);
ctx.stroke();
 更多参考 https://xiaozhuanlan.com/topic/3918675024

标签：canvas,const,option,color,十六,ctx,let,cesium,图层
来源： https://blog.csdn.net/haibalai2009/article/details/122730338

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。