标签

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

1. 初始化

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

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

1.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',
      },
    },
    {
      ...
    }
  ],
}

1.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 属性的优先级更高。

1.3 定义图层初始化

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


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

1.4 标签显隐

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


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

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

2. 代码示例


  // 定义标签数据
  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)
Table of Contents