图层标签

标签是标注空间中的位置，一般用于标注一些特殊位置，如：POI点、监控点、设备点等。

标签图层对应的接口类为ScatterplotLayer 。

1. 功能说明

标签主要用来标识场景中的一些数据点，可自定义标签的外观样式和标签内容。

2. 构造

new ScatterplotLayer(properties)

代码示例如下：

const layer = new ubm.ScatterplotLayer({
  id: 1,
  title: 'geo',
  // 数据定义
  data: data,
  // 样式定义
  style: style
})

传递给构造函数ScatterplotLayer的所有属性列表properties可查看后续属性说明。

3. 属性

属性	类型	可选	说明
id	string	必填	图层唯一标识
title	string	必填	图层的名称，显示用的
data	IData \| string	必填	标签数据定义
style	StyleProps \| StyleProps	---	标签外观样式定义
label	LabelStyle	---	图层标签
featureReduction	string \| null \| object	---	配置减少视图中点要素数量的方法
correspondence	ICorrespondence	---	通信

3.1 标签数据

其中属性data的类型IData的数据结构如下所示：

interface IData {
  type: 'FeatureCollection'
  features: IFeatures[]
}

interface IFeatures {
  type: 'Feature'
  id: number
  geometry: IGeometry
  properties?: object
}

interface IGeometry {
  type: 'Point'
  coordinates: [number, number, number]
}

3.2 标签外观样式

外观style 当多样式POI在同一个图层中展示时，style属性是一个数组。

其中属性style的类型StyleProps的数据结构如下所示：

interface StyleProps {
  type?: string | number
  label?: LabelStyle
  icon?: IconStyle
  line?: LineStyle
  text?: TextStyle
  featureReduction?: 'section' | 'cluster' | null
}

interface Style {
  color?: string | number[]
  size?: number
  position?: string
}

type LabelStyle = Style & {
  expression: string
  placement?: string
  background?: string
}

type IconStyle = Style & {
  href?: string
  name?: string
  outside?: OutsideStyle
  verticalOffset?: number[]
}

interface LineStyle {
  color?: string | number[]
  size?: number
  verticalOffset?: number[]
}

type TextStyle = Style & {
  content?: string
  background?: string | []
  halo?: Style
  verticalOffset?: number[]
}

type OutsideStyle = {
  borderColor?: string | number[]
  bgColor?: string | number[]
  size?: number
  show?: boolean
  href?: string
  raduis?: number
}

3.3 图层标签

当多样式POI在同一个图层中展示时，label属性写在style外层。

属性label同style中的属性label类型一致。

3.4 配置减少视图中点要素数量的方法

当多样式POI在同一个图层中展示时，featureReduction属性写在style外层。

3.5 通信

当多样式POI在同一个图层中展示时，correspondence属性写在style外层,对不同poi所对应的样式进行定义。

类型ICorrespondence的数据结构如下所示：

interface ICorrespondence {
  tapeExpression: string
}

4. 使用

由于标签需要定义很多的样式位置等信息，所以标签图层初始化与其他常规图层初始不同。

想要添加标签，首先定义标签，其次创建以标签作为数据的 ScatterplotLayer ，最后加入场景渲染。

4.1 初始化标签数据

以 GeoJSON 格式定义需要显示的标签信息:

注：GeoJSON 格式规范请参见：https://geojson.org/ 。


const data = {
  type: 'FeatureCollection',
  //标签数组 可以添加多个标签
  features: [
    {
      type: 'Feature',
      id: 1,
      //标签位置
      geometry: {
        type: 'Point',
        // 坐标点分别为longitude(经度), latitude(纬度), z（高度）
        coordinates: [100.0, 0.0, 10],
      },
      //标签属性
      properties: {
        prop0: 'value0',
      },
    },
    {
      ...
    }
  ],
}

4.2 初始化图层样式

定义标签图层的基础样式，样式格式如下：


// 标签样式
  const style = {
    // 文本
    label: {
      // 文本要素 
      expression: '$feature.prop0',
      // 文本颜色
      color: '#fff',
      // 文本大小
      size: 10
      // 背景色
      background:'#407bFF',
      // 标签位置，默认值是center-start
      // 可选值：above-center, above-left, above-right, below-center, below-left, below-right, center-center, center-left, center-right
      placement:'center-right',
    },
    // 图标
    icon: {
      // 图标名称 此名称为 SDK 内置图标的名称 
      name:'\ue614',
      // 图标链接地址
      href: '填写icon的url地址',
      // 图标大小
      size: 100,
      // 图标外侧边框设置
      outside:{
        // 外侧边框是否显示
        show: true,
        // 外侧边框大小
        size: 30
      }
    },
  },

在图层属性中增加 style 设置，定义 label 和 icon ，分别自定义需要显示的文字和图标。

expression 属性是一个表达式: '$feature.prop0' 。意为 label 文字所显示的是标签定义 data 中的 properties 对象下的 prop0 属性。

注：当样式中 icon 图标配置中同时存在 href 和 name 的配置时，图标会只展示 href 属性的图标。换句话说 href 属性的优先级更高。

4.3 初始化标签

标签图层的初始化相对于正常图层多了标签信息配置 data 和图层样式配置 style。


  const layer = new ubm.ScatterplotLayer({
    id: 1,
    title: 'geo',
    // 标签定义
    data: data,
    // 图层样式定义
    style: style
  })

4.4 标签显隐

如需对特定标签进行显隐，可以使用 ScatterplotLayer.effect 进行过滤，其结构如下：


layer.effects = [
  {
    // 判断显隐的条件
    condition: `$feature.key == 'poi1'`,
    // 标签效果
    effect: {
      // 显隐效果 true 显示，false 隐藏
      display: false
    }
  }
]

其中 condition 根据标签数据 properties 中数据进行控制，$feature.key == 'poi1'表示 properties.key 值为 'poi1' 的标签。

4.5 案例


  // 定义标签数据
  const data = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        id: 1,
        geometry: {
          type: 'Point',
          coordinates,
        },
        properties: {
          prop0: 'POI',
        },
      },
    ],
  }
  // 标签图层
  poiLayer = new ubm.ScatterplotLayer({
    id: 2,
    title: '视频监控',
    data,
    style: {
      label: {
        expression: '$feature.prop0',
      },
      icon: {
        size: 14,
        outside:{
          show: true,
          size: 30
        }
      }
    },
    //标签点击事件
    onPick: (info) => {
      console.log(info)
      // 飞行到所点击的标签位置
      scene.goTo({
        target: {
          position: info.position,
          zoom: 20,
        },
      }, { easing: 'in-cubic', duration: 1000 })
      // 打开popup弹窗
      scene.ui.popup.open({
        alignment: 'top-center',
        title: '详细信息',
        location: info.position,
        content: `名称：工地视频监控点 `,
      })
    },
  })

  scene.layer.add(poiLayer)

简介

自定义DOM标签

在场景中，我们可以创建自定义的DOM标签，用于在场景中展示一些自定义的DOM内容，以增强用户体验。