POI 点

向三维场景视图中添加 POI 点，用户可以自定义图标、文字相关属性，注意: 创建多个 POI 点时, 创建需要花费一定的时间, 在创建完成时, 即未收到创建成功事件前不要执行删除等操作。

方法

批量/单个添加 POI 点

• 向三维场景中批量添加 POI 点
• 方法名：add
• 参数说明：

// 方法
add(marker: MarkerOptions | Array<MarkerOptions>): this {}

// MarkerOptions 参数说明
export type MarkerOptions = {
  id: string;  // POI 唯一 id 
  coordinate: Array<number>; // 坐标位置
  groupId: string; // 分组 id 
  enableAnimation?: boolean; // 是否开启跳跃动画
  floor?: string;// 楼层 '1'
  building?: string;// 楼栋 'GDCJ014'
  offset?: number;// z 偏移量
  marker?: {   // 图标相关属性设置，如果不设置只显示 文本
    size?: Array<number>; // 图标大小，默认值 [24,24]
    url?: string; // 图标地址或者图片 base64 字符格式
    bgColor?: string | Array<number>; // 图标背景色
    range?: Array<number>; // 图标可见范围，这是与相机的 armDistance 进行比较的,默认值 [100.0,200000.0]
    visibility?: string; // 是否可见，值为 "visible/hidden"
  };
  label?: { // 文本相关属性设置，如果不设置只显示 图标
    text?: string;  // 文本内容
    bgColor?: string | Array<number>; // 文本背景颜色
    fontColor?: string | Array<number>; // 文本字体颜色
    fontOutlineColor?: string | Array<number>; // 文本字体轮廓颜色
    fontOutlineSize?: number; // 文本字体轮廓大小
    fontSize?: number; // 字体大小
    range?: Array<number>; // 文本可见范围，这是与相机的 armDistance 进行比较的,默认值 [100.0,100000.0]
    visibility?: string;  // 是否可见，值为 "visible/hidden"
  };
};

• 示例参考：

<script setup lang="ts">
  import { Viewer, CameraParams, Color, uuid, MarkerEventType } from '@qpaas/dt-api'
  import { nextTick, onMounted, ref } from 'vue'
  const container = ref(undefined)
  let viewer: Viewer
  let visible = true
  let handleCount = 0

  onMounted(async () => {
    nextTick()
    viewer = new Viewer(container.value, {
      streamUrl: '10.10.10.253:5668',
      cameraOptions: {
        coordinate: [122.00655364990234, 40.75194549560547, 57.27960205078125],
        armDistance: 57240.28125,
        pitch: -12.684314727783203,
        yaw: -147.36483764648438,
        panIntensity: 0.5
      }
    })
    viewer.marker.on(MarkerEventType.Click, markerClick)
  })

  function markerClick(evt: any) {
    console.log(evt)
  }

  async function handleMsg(count = 100) {
    const infos = []
    for (let i = 0; i < count; i++) {
      const info = {
        id: uuid(),
        groupId: `test-group-${handleCount}`,
        coordinate: [
          121.99869537353516 + Math.random() * 0.01,
          40.746940612792969 + +Math.random() * 0.01,
          31.902296066284
        ],
        // enableAnimation: true,
        marker: {
          url: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/newjiankang-f03b804b4b.png'
        },
        label: {
          text: `测试数据-${i}`
        }
      }
      infos.push(info)
    }
    viewer.marker.add(infos)
    handleCount++
  }
</script>

<template>
  <div class="viewer">
    <div class="tools">
      <el-button type="primary" @click="handleMsg()">添加 POI</el-button>
    </div>
    <div class="home" ref="container"></div>
  </div>
</template>

更新 POI 点

• 通过 POI 的 id 进行 POI 相关更新
• 方法名：update
• 参数说明：

// 方法
 update(id: string, params: MarkerParams) {}

// MarkerParams 说明，参照 MarkerOptions
export type MarkerParams = {
  coordinate?: Array<number>;
  enableAnimation?: boolean;
  marker?: {
    size?: Array<number>;
    url?: string;
    bgColor?: string | Array<number>;
    range?: Array<number>;
    visibility?: string;
  };
  label?: {
    text?: string;
    bgColor?: string | Array<number>;
    fontColor?: string | Array<number>;
    fontOutlineColor?: string | Array<number>;
    fontOutlineSize?: number;
    fontSize?: number;
    range?: Array<number>;
    visibility?: string;
  };
};

• 示例参考：

viewer.marker.update('Q-46677D46-1F6D-4BD8-9E6E-017B8DBEA7E3', {
  enableAnimation: true,
  label: {
    text: '测试更新',
    bgColor: 'transparent',
    fontColor: "red"
  },
  marker: {
    bgColor: 'transparent'
  }
})

根据分组 id 完成 POI 移除

• 根据分组 id 移除 POI 点
• 方法名：removeByGroupIds
• 参数说明：

// 方法 groupIds 分组 id 数组
  removeByGroupIds(groupIds: Array<string>) {}

• 示例参考：

viewer.marker.removeByGroupIds(['test-group'])

根据 POI 的 id 完成 POI 移除

• 根据 POI 的 id 移除 POI 点
• 方法名：resetViewer
• 参数说明：

// 方法 ids POI 的 id 数组
  removeByIds(ids: Array<string>) {}

• 示例参考：

viewer.marker.removeByIds(['test-id'])

清空场景中已添加的所有 POI 点

• 清空所有 POI 点
• 方法名：clear
• 参数说明：

// 方法
clear() {}

• 示例参考：

 viewer.marker.clear()

显示/隐藏所有 POI 点

• 显示/隐藏三维场景中已添加的所有 POI 点
• 方法名：setVisible
• 参数说明：

// 方法
setVisible(visible: boolean): this {}

• 示例参考：

 viewer.marker.setVisible(false)

根据分组 id 显示/隐藏 POI 点

• 根据分组 id 显示/隐藏三维场景中已添加的 POI 点
• 方法名：setVisibleByGroupIds
• 参数说明：

// 方法
setVisibleByGroupIds(groupIds: Array<string>, visible: boolean): this {}

• 示例参考：

 viewer.marker.setVisibleByGroupIds(['test-group-0'], visible)

根据 POI 的 id 显示/隐藏 POI 点

• 根据 POI 的 id 显示/隐藏三维场景中已添加的 POI 点
• 方法名：setVisibleByIds
• 参数说明：

// 方法
setVisibleByIds(ids: Array<string>, visible: boolean): this {}

• 示例参考：

 viewer.marker.setVisibleByIds(['test-id'], visible)

POI 事件

• 目前支持三维场景中已添加 POI 点的点击事件
• 方法名：on/off
• 参数说明：

// 开启 POI 点击事件监听
on(type: MarkerEventType, callback, context) {}

// 关闭 POI 点击事件监听
off(type: MarkerEventType, callback, context): boolean {}

// MarkerEventType 参数说明
export class MarkerEventType {
  static Click = 'click' as const;
}

// callback 事件成功监听响应后触发的回调函数

• 示例参考：

 viewer.marker.on(MarkerEventType.Click, (evt:any) => {
   console.log(evt)
 })

• 回调的数据格式说明:

{
  eventName: 'OnPOIClick',
  datas: {
    // 需要更多的参数后期再扩展
    id: 'Q-20D623ED-2022-4033-BBB2-4D5610A4F921',
    text: '测试数据-61',
    coordinate: [122.00718688964844, 40.75048828125, 31.90229606628418]
  }
}