usePoints

实验性功能

这是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。

打点并且响应式的更新数据。

第一个参数为一个数组，usePoints遍历这个数组以进行打点。
第二个参数为循环时调用的回调函数，参数为数组中的每一项。通过这个回调函数来自定义打点的标记。

这是基于 LabelCollection 和 BillboardCollection 实现的，因此其性能应当是可靠的。

使用

const data = shallowRef([
  { id: 1, lon: '86', lat: '27' },
  { id: 2, lon: '86.5', lat: 27.5 },
  { id: 3, lon: 87, lat: 28 },
  { id: 4, lon: '86', lat: '27', height: '500' }
])

const { points, flyTo, toggleShow } = usePoints(data, item => ({
  id: item.id,
  longitude: item.lon,
  latitude: item.lat,
  height: item.height,
  billboardOptions: {
    scale: 0.02,
    image: img
  },
  labelOptions: { text: String(item.id) },
  onEach({ label, billboard }, index) {
    // 在生成每个点位后执行的回调函数

    console.log(label)
    console.log(billboard)
  }
}))

flyTo(1) // 基于`viewer.flyTo`将镜头移动至id为1的点位
flyTo(2, (_, pos) => {
  console.log('开始flyTo时执行的回调', pos)
}).then(() => {
  console.log('flyTo完成时执行的回调')
})

toggleShow(false) // 隐藏所有点位
toggleShow() // 反转所有点位的显隐状态

const { label, billboard } = points.get(1) // 获取id为1的点位

data.value = [{ id: 1, lon: '86', lat: '27' }] // 这会触发更新，原来的点位会被清除
data.value = [] // 相当于清除所有定位

函数返回的points 是一个 Map 类型的数据，存放了 id -> { label, billboard } 的键值对，你可以通过对 Map 的操作来获取对应点位的数据。

手动修改 points 的注意事项

在使用points进行增删改时候，不要忘记手动同步到billboardCollection和labelCollection。因为usePoints被认为是用于根据一段数据生成点位的函数，因此手动修改其中的点位被认为是少见的边缘情况，目前没有计划为了方便手动修改而添加新的 API。

demo

类型声明

Details

export type UsePointsBillboardOptions = Omit<
  Cesium.Billboard.ConstructorOptions,
  "position"
>
export type UsePointsLabelOptions = Omit<
  Cesium.Label.ConstructorOptions,
  "position"
>
export interface UsePointsOptions {
  id: any
  longitude: number | string
  latitude: number | string
  height?: number | string
  billboardOptions: UsePointsBillboardOptions
  labelOptions: UsePointsLabelOptions
  onEach?: (
    item: {
      label: Cesium.Label
      billboard: Cesium.Billboard
    },
    index: number,
  ) => void
}
export declare function usePoints<UsePointsItem extends object = object>(
  data: MaybeRefOrGetter<UsePointsItem[]>,
  options: (item: UsePointsItem) => UsePointsOptions,
): {
  billboardCollection: Cesium.BillboardCollection
  labelCollection: Cesium.LabelCollection
  points: Map<
    string,
    {
      label: Cesium.Label
      billboard: Cesium.Billboard
    }
  >
  toggleShow: (state?: boolean) => void
  flyTo: (
    id: UsePointsOptions["id"],
    fn?: (billboard: Cesium.Billboard, coordinate: Cesium.Cartesian3) => void,
  ) => Promise<Cesium.Billboard>
}

源码

source • demo

usePoints ​

使用 ​

demo ​

类型声明 ​

源码 ​

usePoints

使用

demo

类型声明

源码