cesium 圖層構(gòu)建的那些事 (十六)

今天我們來(lái)講下聚合圖層


首先我們定義參數(shù)

export enum ECluserLayerType {

circle =?0,

shine =?1,

image =?2,//未實(shí)現(xiàn)

}


interface ClusterColor {

value: number,

color: string

}


export interface PBaseCluserLayer {

enabled?: boolean,// 開(kāi)啟聚集統(tǒng)計(jì)

pixelRange?: number,// 獲取或設(shè)置像素范圍以擴(kuò)展屏幕空間邊界框。

minimumClusterSize?: number,//獲取或設(shè)置可以集群的最小屏幕空間對(duì)象數(shù)

cluster?: {

type: ECluserLayerType,//聚集時(shí)候展示的類(lèi)型

label?: {

size?: number,

color?: string,

font?: string

}

colors?:?Array,//必須從大到小

image?:?String//如果type是image,則必須填寫(xiě)圖片地址image

}


}

聚合輔助類(lèi)

```javascript

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("類(lèi)型無(wú)法識(shí)別:" + 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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市辣吃,隨后出現(xiàn)的幾起案子送膳,更是在濱河造成了極大的恐慌铅祸,老刑警劉巖省有,帶你破解...
    沈念sama閱讀 223,126評(píng)論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件澜掩,死亡現(xiàn)場(chǎng)離奇詭異账磺,居然都是意外死亡芹敌,警方通過(guò)查閱死者的電腦和手機(jī)痊远,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)氏捞,“玉大人碧聪,你說(shuō)我怎么就攤上這事∫壕ィ” “怎么了逞姿?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,941評(píng)論 0 366
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)捆等。 經(jīng)常有香客問(wèn)我滞造,道長(zhǎng),這世上最難降的妖魔是什么楚里? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,294評(píng)論 1 300
  • 正文 為了忘掉前任断部,我火速辦了婚禮,結(jié)果婚禮上班缎,老公的妹妹穿的比我還像新娘蝴光。我一直安慰自己,他們只是感情好达址,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布蔑祟。 她就那樣靜靜地躺著,像睡著了一般沉唠。 火紅的嫁衣襯著肌膚如雪疆虚。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,874評(píng)論 1 314
  • 那天满葛,我揣著相機(jī)與錄音径簿,去河邊找鬼。 笑死嘀韧,一個(gè)胖子當(dāng)著我的面吹牛篇亭,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播锄贷,決...
    沈念sama閱讀 41,285評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼译蒂,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了谊却?” 一聲冷哼從身側(cè)響起柔昼,我...
    開(kāi)封第一講書(shū)人閱讀 40,249評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎炎辨,沒(méi)想到半個(gè)月后捕透,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,760評(píng)論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評(píng)論 3 343
  • 正文 我和宋清朗相戀三年激率,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了咳燕。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片勿决。...
    茶點(diǎn)故事閱讀 40,973評(píng)論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡乒躺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出低缩,到底是詐尸還是另有隱情嘉冒,我是刑警寧澤,帶...
    沈念sama閱讀 36,631評(píng)論 5 351
  • 正文 年R本政府宣布咆繁,位于F島的核電站讳推,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏玩般。R本人自食惡果不足惜银觅,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望坏为。 院中可真熱鬧究驴,春花似錦、人聲如沸匀伏。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,797評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)够颠。三九已至熙侍,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間履磨,已是汗流浹背蛉抓。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,926評(píng)論 1 275
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留剃诅,地道東北人巷送。 一個(gè)月前我還...
    沈念sama閱讀 49,431評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像综苔,于是被迫代替她去往敵國(guó)和親惩系。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容