Cesium聚簇
作者:互联网
Cesium聚簇
上篇中 已经出现了 很多图元的时候 性能优化的事 ,但是地图上 会有密密麻麻的各种图标 或者文字
这就要用到 聚簇了
var dataSourceForCluster = new Cesium.CustomDataSource('cluster');
var count = 100000;
for (var i = 0; i < count; ++i) {
dataSourceForCluster.entities.add({
id: "" + i,
position: new Cesium.Cartesian3.fromDegrees(Math.random() * 100, Math.random() * 100, 10000),
billboard: {
image: '../src/assets/image/wx.png',
height: 30,
width: 30
}
});
}
var dataSourcePromise = viewer.dataSources.add(dataSourceForCluster);
dataSourcePromise.then(function (dataSource) {
var pixelRange = 15;
var minimumClusterSize = 3;
var enabled = true;
dataSource.clustering.enabled = enabled;
dataSource.clustering.pixelRange = pixelRange;
dataSource.clustering.minimumClusterSize = minimumClusterSize;
var pinBuilder = new Cesium.PinBuilder();
var pin50 = pinBuilder.fromText('50+', Cesium.Color.RED, 48).toDataURL();
var pin40 = pinBuilder.fromText('40+', Cesium.Color.ORANGE, 48).toDataURL();
var pin30 = pinBuilder.fromText('30+', Cesium.Color.YELLOW, 48).toDataURL();
var pin20 = pinBuilder.fromText('20+', Cesium.Color.GREEN, 48).toDataURL();
var pin10 = pinBuilder.fromText('10+', Cesium.Color.BLUE, 48).toDataURL();
var singleDigitPins = new Array(8);
for (var i = 0; i < singleDigitPins.length; ++i) {
singleDigitPins[i] = pinBuilder.fromText('' + (i + 2), Cesium.Color.VIOLET, 48).toDataURL();
}
dataSource.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {
cluster.label.show = false;
cluster.billboard.show = true;
cluster.billboard.id = cluster.label.id;
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];
}
});
});
标签:cluster,clusteredEntities,billboard,聚簇,var,Cesium,image 来源: https://www.cnblogs.com/little-oil/p/16636084.html