> mapgis-3d-theme-layer-custom

## # 属性

### # `vueKey`

- 类型: `String`
- 可选
- 非侦听属性
- 默认值: `default`
- 描述: mapgis-web-scene 组件的 ID，当使用多个 mapgis-web-scene 组件时，需要指定该值，来唯一标识 mapgis-web-scene 组件，同时 mapgis-web-scene 插槽中的组件也需要传入相同的 vueKey，让组件知道应该作用于哪一个 mapgis-web-scene。

### # `vueIndex`

- 类型: `Number`
- 可选
- 非侦听属性
- 默认值: `(Math.random() * 100000000).toFixed(0)`随机计算值
- 描述: 当 mapgis-web-scene 插槽中使用了多个相同组件时，例如多个 mapgis-3d-igs-doc-layer 组件，用来区分组件的标识符。

### # `baseUrl`

- 类型: `String`
- 必选:
- 侦听属性
- 描述: 必填项，标准的 geojson 地理数据文件。

### # `layerId`

- 类型: `String`
- 可选
- 侦听属性
- 默认值:`矢量图层`
- 描述: 专题图层的Id。

### # `type`

- 类型: `String`
- 必选
- 侦听属性
- 默认值:`uniform`
- 描述: 三维专题图类型，包括`uniform`、`unique`、`range`、`gradual`、`random`。

### # `field`

- 类型: `String`
- 可选
- 侦听属性
- 默认值:``
- 描述: 三维专题图字段名称，用于专题图符号化绘制，在统一专题图、随机专题图中可隐藏，在单值专题图、分段专题图、渐变专题图中必须填写。

### # `type`

- 类型: `String`
- 必选
- 非侦听属性
- 默认值:`uniform`
- 描述: 三维专题图类型，包括`uniform`、`unique`、`range`、`random`。

### # `themeOptions`

- 类型: `Object`
- 必选:
- 侦听属性
- 默认值
- 描述: 必填项，专题图绘制规则。

### # `filter`

- 类型: `Object`
- 可选
- 侦听属性
- 默认值
- 描述: 必填项，外部可传入filter，内部监听filter实现交互。

### # `filterOptions`

- 类型: `Object`
- 可选
- 侦听属性
- 默认值
- 描述: 必填项，外部可传入filter，内部监听filterOptions实现样式变化。

### # `autoReset`

- 类型: `Boolean`
- 可选
- 侦听属性
- 默认值:`true`
- 描述: 专题图跳转，在加载专题图时，视角会飞行到专题图上，和offsetHeight大小有关。

### # `offsetHeight`

- 类型: `Number`
- 可选
- 非侦听属性
- 默认值:`4000`
- 描述: 专题图高度，当相机视角高度高于offsetHeight，专题图不可见；低于offsetHeight，专题图显示。

### # `enableHighlight`

- 类型: `Boolean`
- 可选
- 非侦听属性
- 默认值:`false`
- 描述: 将专题地图中指定的要素进行高亮显示

### # `highlightStyle`

- 类型: `Object`
- 必选:
- 非侦听属性
- 描述: 将专题地图中指定的要素进行高亮显示

### # `visible`

- 类型: `Boolean`
- 可选:
- 非侦听属性
- 描述: 控制专题地图是否显示
- 默认值: true

## # 事件

### # `@load`

- Description: 在 Mapgis3dThemeLayerCustom 加载完毕后发送该事件
- Payload Mapgis3dThemeLayerCustom 组件对象

### # `@unload`

- Description: 关闭 Mapgis3dThemeLayerCustom 组件前发送该事件
- Payload Mapgis3dThemeLayerCustom 组件对象

### # `@bbox`

- Description: 解析数据时发送该事件
- Payload geojson数据范围（包围盒）

### # `@themeClick`

- Description: 左击专题图时 发送该事件
- Payload 点击的专题图所在的 entity 属性

### # `@themeHover`

- Description: 鼠标移至专题图上时 发送该事件
- Payload 鼠标经过的专题图所在的 entity属性

## # 示例

    import { Style } from "@mapgis/webclient-es6-service";
    const { LineStyle, PointStyle, FillStyle, Shadow } = Style;
    <template>
      <mapgis-web-scene :style="{ height: '95vh' }">
        <mapgis-3d-theme-layer-custom
            v-bind="$props"
            @load="load"
            @unload="unload"
            @bbox="handlebbox"
            @themeClick="handleClick"
            @themeHover="handleHover"
          />
      </mapgis-web-scene>
    </template>
    <script>
    export default {
      data() {
        return {
          baseUrl: "http://localhost:8895/geojson/420000_full.json",
          visible: true,
          themeOptions: {
            type: "range-value",
            field: "childrenNum",
            rangeValueInfos: [
              {
                start: 0,
                end: 3,
                symbolStyle: new FillStyle({
                  color: '#ff0000',
                  outlineColor: '#ff0000',
                  outlineWidth: 1,
                  opacity: 1,
                })
              },
              {
                start: 3,
                end: 6,
                symbolStyle: new FillStyle({
                  color: '#ff4b4b',
                  outlineColor: '#ff4b4b',
                  outlineWidth: 1,
                  opacity: 1,
                })
              },
              {
                start: 6,
                end: 9,
                symbolStyle: new FillStyle({
                  color: '#ff8282',
                  outlineColor: '#ff8282',
                  outlineWidth: 1,
                  opacity: 1,
                })
              },
              {
                start: 9,
                end: 12,
                symbolStyle: new FillStyle({
                  color: '#ffafaf',
                  outlineColor: '#ffafaf',
                  outlineWidth: 1,
                  opacity: 1,
                })
              },
              {
                start: 12,
                end: 15,
                symbolStyle: new FillStyle({
                  color: '#ffdcdc',
                  outlineColor: '#ffdcdc',
                  outlineWidth: 1,
                  opacity: 1,
                })
              }
            ]
          }
        };
      },
      methods: {
      },
    };
    </script>