?

// data ：geojson數(shù)據(jù) dbcBuliding(data = this.option.geojsonData) {let _this = this// let viewer = _this.viewer;let promise = Cesium.GeoJsonDataSource.load(data, {clampToGround: true,});promise.then(dataSource => {dataSource.name = "bdc"//dataSources添加成功，監(jiān)聽// _this.viewer.dataSources.dataSourceAdded.addEventListener(function (a, b) {// console.log("addEventListener", a, b)// })viewer.dataSources.add(dataSource);_this.dataSource_dbc = dataSource_this.addEntites_Geojson(dataSource) // 創(chuàng)建實體,label標(biāo)簽_this.customStyle(dataSource) //標(biāo)簽聚合}).otherwise(function (error) {console.log(error);});}customStyle(dataSource) {let enabled = true;///是否聚合let pixelRange = 30;//聚合范圍（單位px）let minimumClusterSize = 3;//最小聚合數(shù)值（小于等于該數(shù)值，不聚合）dataSource.clustering.enabled = enabled;//是否聚合dataSource.clustering.pixelRange = pixelRange;//聚合范圍（單位px）dataSource.clustering.minimumClusterSize = minimumClusterSize;//最小屏幕聚合對象數(shù)值（小于等于該數(shù)值，不聚合）let removeListener;const pin50 = drawCircle("50+", 3)const pin40 = drawCircle("40+", 2)const pin30 = drawCircle("30+", 0)const pin20 = drawCircle("20+", 0)const pin10 = drawCircle("10+", 0)const singleDigitPins = new Array(8);for (let i = 0; i < singleDigitPins.length; ++i) {singleDigitPins[i] = drawCircle("" + (i + 2), 0, 16)}let clustermStyle = () => {if (Cesium.defined(removeListener)) {removeListener();removeListener = undefined;} else {removeListener = dataSource.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {cluster.label.show = false;cluster.billboard.show = true;cluster.billboard.id = cluster.label.id;cluster.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 10000.0),cluster.billboard.verticalOrigin =Cesium.VerticalOrigin.BOTTOM;if (clusteredEntities.length >= 50) {cluster.billboard.image = pin50;} else if (clusteredEntities.length >= 40) {cluster.billboard.image = pin40;} else if (clusteredEntities.length >= 30) {cluster.billboard.image = pin30;} else if (clusteredEntities.length >= 20) {cluster.billboard.image = pin20;} else if (clusteredEntities.length >= 10) {cluster.billboard.image = pin10;}else {cluster.billboard.image =singleDigitPins[clusteredEntities.length - 2];}});}// force a re-cluster with the new stylingconst pixelRange = dataSource.clustering.pixelRange;dataSource.clustering.pixelRange = 0;dataSource.clustering.pixelRange = pixelRange;}clustermStyle()} // text 文本，key判斷顏色，centerx讓文本居中1位數(shù)6/2位數(shù)16 / drawCircle(text, key, centerx = 6) {const canvas_option = ["rgba(0,191,255,0.8)", // 深藍(lán)色"rgba(0,128,0,0.8)", //純綠"rgba(255,165,0,0.8)", // 橙色 "rgba(220,20,60,0.8)", // 紅色]var canvas = document.createElement('canvas')canvas.width = 42canvas.height = 42let context2D = canvas.getContext('2d')context2D.save();context2D.beginPath();context2D.arc(21, 21, 20, 0, 2 * Math.PI);context2D.fillStyle = canvas_option[key]//設(shè)置圖形的填充顏色context2D.fill()context2D.closePath();context2D.restore();context2D.stroke();context2D.save(); //save和restore可以保證樣式屬性只運用于該段canvas元素// context2D.strokeStyle = canvas_option[key]; //設(shè)置描邊樣式context2D.font = "20px Arial"; //設(shè)置字體大小和字體context2D.fillText(text, centerx, 28); //填充線context2D.stroke(); //執(zhí)行繪制context2D.restore();context2D.closePath()context2D.restore()let a = canvas.toDataURL()return a }

總結(jié)

以上是生活随笔為你收集整理的cesium 添加geojson数据，创建白模，创建label标签，并使用canvas自定义聚合背景图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。