染色插件

为了方便的对 BuildingLayer 此图层建筑进行染色修改，我们 SDK 提供了自定义染色插件 ColorizerPlugin 。

1. 注册插件

在场景中注册 ColorizerPlugin 插件。

// 注册ColorizerPlugin插件
const colorizerPlugin = new ubm.ColorizerPlugin()
scene.plugin.register(colorizerPlugin )

2. 绑定图层

使用插件的 layers 属性，指定需要染色的图层。

  // 设置着色图层
  colorizerPlugin.layers = [layer]

3. 设置染色条件及效果

使用插件的 effects 属性，指定着色条件和效果。

  // 设置着色条件及效果
  colorizerPlugin.effects = [{
    condition:`$feature.id == 1`,
    effect:{
      type: 'mesh-3d',
      fill: { color: 'green', colorMixMode:'replace' },
      border: {
        type: 'solid',
        color: [10, 10, 10, 1],
        size: 1,
      },
    }
  },{
    condition:`$feature.of_category == "Planting"`,
    effect:{
      type: 'mesh-3d',
      fill: { color: 'red', colorMixMode:'replace' }
    }
  }]

effects 的数据结构如下：

interface EffectItem {
  // 染色条件
  condition: string
  // 染色效果
  effect: Effect
}

interface Effect {
  // 类型
  type: string
  // 阴影，只有在给场景设置阴影才有效果
  shadow: boolean
  // 填充颜色
  fill: Fill
  // 填充轮廓
  border?: Border
}

interface Fill {
  // 填充颜色
  color: string | number[]
  // 填充颜色与原始材质的处理方式
  colorMixMode?: ColorMixMode
}

interface Border {
  // 边的类型
  type: Edges3DType
  // 边的大小
  size: number
  // 颜色
  color: string | number[]
  // 边的扩展长度
  extensionLength?: number
}
// sketch -- 素描风格   solid -- 实线风格
type Edges3DType = 'sketch' | 'solid'

// replace -- 用颜色替换材质  tint -- 材质灰度  multiply -- 颜色材质混合
type ColorMixMode = 'replace' | 'tint' | 'multiply'

其中上述的染色条件 condition 其赋值需要使用染色条件表达式来赋值。

染色条件表达式用于控制染色效果的显示。表达式中构件变量需要使用 $feature. 作为前缀，后缀为模型上构件属性值。

注：模型构件信息可通过图层的点击事件返回值中得到，具体做法请参看图层简介的图层事件。

运算符前后需要有空格，如果运算对象是字符串，需要加上单引号，一些条件运算符如下所示：

类型运算符示例
大于>$feature.id > 1
小于<$feature.id < 1
等于==$feature.id == 1
不等于!=$feature.id != 1
且&&$feature.id > 1 && $feature.of_category == "Planting"
或||$feature.id > 1 || $feature.id == 0

4. 染色执行

调用插件的 render() 方法，对设置的图层和着色条件效果进行着色处理。

  // 对上述条件进行着色处理
  colorizerPlugin.render()

对于上述步骤所实现的效果请参看下面跳转示例：

ColorizerPlugin 此插件除了上述的基本用法，还提供了以下两种方法：

5. 添加染色条件

addEffect() ：添加条件着色，传入着色条件及效果。使用方法如下：

    colorizerPlugin.colorizer.addEffect({
      condition:`$feature.id == 52`,
      effect:{
        type: 'mesh-3d',
        fill: { color: 'blue' },
        border: {
          type: 'solid',
          color: [10, 10, 10, 1],
          size: 1,
        },
      }
    })
    colorizerPlugin.render()

6. 清空染色条件

clear() ：清空条件着色，回到原始效果。使用方法如下：

colorizerPlugin.clear()

有关色彩的相关案例参看下面链接跳转示例：

Table of Contents