cesium 添加geojson数据,创建白模,创建label标签,并使用canvas自定义聚合背景图片
// data :geojson数据dbcBuliding(data = this.option.geojsonData) {let _this = this// let viewer = _this.viewer;let promise = Cesium.GeoJsonDataSource.load(data, {clampToGround: true,});promise.then(dataS
·
// data :geojson数据
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添加成功,监听
// _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) // 创建实体,label标签
_this.customStyle(dataSource) //标签聚合
}).otherwise(function (error) {
console.log(error);
});
}
customStyle(dataSource) {
let enabled = true;///是否聚合
let pixelRange = 30;//聚合范围(单位px)
let minimumClusterSize = 3;//最小聚合数值(小于等于该数值,不聚合)
dataSource.clustering.enabled = enabled;//是否聚合
dataSource.clustering.pixelRange = pixelRange;//聚合范围(单位px)
dataSource.clustering.minimumClusterSize = minimumClusterSize;//最小屏幕聚合对象数值(小于等于该数值,不聚合)
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 styling
const pixelRange = dataSource.clustering.pixelRange;
dataSource.clustering.pixelRange = 0;
dataSource.clustering.pixelRange = pixelRange;
}
clustermStyle()
}
// text 文本,key判断颜色,centerx让文本居中1位数6/2位数16
/ drawCircle(text, key, centerx = 6) {
const canvas_option = [
"rgba(0,191,255,0.8)", // 深蓝色
"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 = 42
canvas.height = 42
let context2D = canvas.getContext('2d')
context2D.save();
context2D.beginPath();
context2D.arc(21, 21, 20, 0, 2 * Math.PI);
context2D.fillStyle = canvas_option[key]//设置图形的填充颜色
context2D.fill()
context2D.closePath();
context2D.restore();
context2D.stroke();
context2D.save(); //save和restore可以保证样式属性只运用于该段canvas元素
// context2D.strokeStyle = canvas_option[key]; //设置描边样式
context2D.font = "20px Arial"; //设置字体大小和字体
context2D.fillText(text, centerx, 28); //填充线
context2D.stroke(); //执行绘制
context2D.restore();
context2D.closePath()
context2D.restore()
let a = canvas.toDataURL()
return a
}

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
所有评论(0)