cesium之加载大量标注点位

64 阅读1分钟

Primitives与BillboardCollection结合

 billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection());
 // 加载房屋点位 数据请求
  const getHouse = () => {
    clearBillboard();
    requestApi.getHousePage({ currentPage: 1, pageSize: 9999 }).then((res) => {
      console.log(res, '房屋点位', billboards);
      const list = res.records;
      let position, point;
      list.forEach((item) => {
        const { id, community, gridsMini, housingEstate, lat, lng, structure } = item;
        position = Cesium.Cartesian3.fromDegrees(+lng, +lat, 0);
        point = { id, community, gridsMini, housingEstate, lat, lng, structure };
        addPrimitive(position, point);
      });
    });
  };
 // 添加
  function addPrimitive(position, point) {
    const { community, gridsMini, housingEstate, lat, lng, structure } = point;
    console.log('添加了');
    billboards.add({
      id: point.id,
      width: 40,
      height: 31,
      position: position,
      image: houseImgUrl,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      data: { community, gridsMini, housingEstate, lat, lng, structure },
    });
  }

  /**移除billboards */
  const clearBillboard = () => {
    billboards.removeAll();
  };

2. EntityCollection的方法

// 之前的添加方式
const entityCollection = new Cesium.EntityCollection();
const entity = new Cesium.Entity({
  position: Cesium.Cartesian3.fromDegrees(114.49, 41.23, 0),
  billboard: {
          width: 30,
          height: 30,
          image: ''
  },
});
entityCollection.add(entity);

3. CustomDataSource的方法

let myEntityCollection = new Cesium.CustomDataSource("clickEntityCollection");
viewer.dataSources.add(myEntityCollection);
myEntityCollection.entities.add(new Cesium.Entity(options));