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
  • 描述: 三维专题图类型,包括uniformuniquerangegradualrandom

# field

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

# type

  • 类型: String
  • 必选
  • 非侦听属性
  • 默认值:uniform
  • 描述: 三维专题图类型,包括uniformuniquerangerandom

# 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>