/**
* @description: 初始化点聚合功能
* @param {*} viewer Cesium Viewer 对象
* @param {*} firePng icon图标的路径
* @return {*}
*/
function initCluster(viewer, firePng) {
if (viewer) {
const geojson = {
type: "FeatureCollection",
features: [],
};
// 后端传来的数据
let data = [
{
longitude: 103.82132556343547,
latitude: 31.16005363585357,
},
{
longitude: 103.78300834434437,
latitude: 31.10858670580027,
},
{
longitude: 203.8580729321287,
latitude: 31.15876409117598,
},
{
longitude: 203.8580729321287,
latitude: 31.25876409117598,
},
{
longitude: 203.8580729321287,
latitude: 31.25876409118598,
},
];
// 转换数据为GeoJSON格式
data.forEach((item) => {
geojson.features.push({
type: "Feature",
geometry: {
type: "Point",
coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)],
},
properties: {
...item,
},
});
});
const options = {
camera: viewer.scene.camera,
canvas: viewer.scene.canvas,
};
const dataSourcePromise = viewer.dataSources.add(
Cesium.GeoJsonDataSource.load(geojson, options)
);
const img = firePng; // 自定义图标
dataSourcePromise.then(function (dataSource) {
// 设置实体的图标和标签
dataSource.entities.values.forEach((entity) => {
entity.billboard = {
image: img,
width: 25,
height: 25,
};
entity.label = {
show: false,
text: "标签",
font: "bold 15px Microsoft YaHei",
verticalOrigin: Cesium.VerticalOrigin.CENTER,
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
pixelOffset: new Cesium.Cartesian2(15, 0),
};
});
const pixelRange = 15;
const minimumClusterSize = 2;
dataSource.clustering.enabled = true;
dataSource.clustering.pixelRange = pixelRange;
dataSource.clustering.minimumClusterSize = minimumClusterSize;
let removeListener;
function customStyle() {
if (Cesium.defined(removeListener)) {
removeListener();
removeListener = undefined;
} else {
removeListener = dataSource.clustering.clusterEvent.addEventListener(
function (clusteredEntities, cluster) {
cluster.label.show = true;
cluster.label.text = clusteredEntities.length.toString(); // 设置聚合数量的文本
cluster.label.font = "bold 15px Microsoft YaHei";
cluster.billboard.show = false;
cluster.billboard.id = cluster.label.id;
cluster.billboard.width = 25;
cluster.billboard.height = 25;
cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
cluster.billboard.image = img;
}
);
}
// 强制重新聚合以应用新的样式
const pixelRange = dataSource.clustering.pixelRange;
dataSource.clustering.pixelRange = 0;
dataSource.clustering.pixelRange = pixelRange;
}
customStyle();
});
}
}
cesium 聚合功能直接复制运行就ok
最新推荐文章于 2024-05-06 17:11:44 发布