cesium实现POI点位聚合与删除点位的封装

import * as Cesium from "cesium";
import { useMainStore } from "../store/index";
// 点位聚合功能
let dataSource;
export const poiCluster = async () => {
  const MainStore = useMainStore();
  dataSource = await MainStore.viewer.dataSources.add(
    Cesium.GeoJsonDataSource.load("/json/poi.json"),
    { clampToGround: true }
  );
  // 设置聚合参数
  dataSource.clustering.enabled = true;
  dataSource.clustering.pixelRange = 15;
  dataSource.clustering.minimumClusterSize = 3;
  dataSource.entities.values.forEach((entity) => {
    // 将点拉伸一定高度，防止被地形压盖
    // entity.position._value.z += 50.0;
    entity.billboard = {
      image: "/icons/poi.png",
      width: 32,
      height: 32,
    };
    entity.label = {
      text: "POI",
      font: "bold 15px Microsoft YaHei", // 竖直对齐方式
      verticalOrigin: Cesium.VerticalOrigin.CENTER, // 水平对齐方式
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // 偏移量
      pixelOffset: new Cesium.Cartesian2(15, 0),
    };
  });
  // const pinBuilder = new Cesium.PinBuilder();
  // clusteredEntities被聚合掉的实体  cluster聚合后的实体
  dataSource.clustering.clusterEvent.addEventListener(
    (clusteredEntities, cluster) => {
      // 关闭自带的显示聚合数量的标签
      cluster.label.show = false;
      // 根据文本生成个图片地址
      // let pinImg = pinBuilder.fromText(cluster.label.text, Cesium.Color.RED, 48).toDataURL();
      // 设置广告牌的显隐
      cluster.billboard.show = true;
      // 设置广告牌的图片
      // cluster.billboard.image = pinImg;
      // 根据聚合数量的多少设置不同层级的图片以及大小
      if (clusteredEntities.length >= 50) {
        cluster.billboard.image = "/icons/num50.png";
        cluster.billboard.width = 132;
        cluster.billboard.height = 132;
      } else if (clusteredEntities.length >= 20) {
        cluster.billboard.image = "/icons/num20.png";
        cluster.billboard.width = 116;
        cluster.billboard.height = 116;
      } else if (clusteredEntities.length >= 10) {
        cluster.billboard.image = "/icons/num10.png";
        cluster.billboard.width = 108;
        cluster.billboard.height = 108;
      } else {
        cluster.billboard.image = "/icons/num3.png";
        cluster.billboard.width = 100;
        cluster.billboard.height = 100;
      }
      // 设置广告的显示位置
      cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
      cluster.billboard.heightReference =
        Cesium.HeightReference.CLAMP_TO_GROUND;
    }
  );
};
export const deletePoiCluster = () => {
  if (dataSource) {
    const MainStore = useMainStore();
    MainStore.viewer.dataSources.removeAll();
  }
};

将实现准备好的点位json文件或接口返回的数据传入

{
  "type": "FeatureCollection",
  "name": "poilist",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id_0": 1,
        "id": "xx_cz_000001",
        "name": "青岛西海岸新区致远高级中学",
        "address": "山东省青岛市黄岛区前湾港路888号"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          120.13626636716779,
          30.3200172927151
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "id_0": 2,
        "id": "xx_cz_000002",
        "name": "青岛市城阳第一高级中学",
        "address": "山东省青岛市城阳区重庆北路398号"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          120.13674721391646,
          30.320092152501196
        ]
      }
    }
  ]
}

使用相应的API实现删除功能

viewer.dataSources.removeAll();