# 分层分户

mapgis-3d-stratified-household

分层分户

# 属性

# 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 组件,用来区分组件的标识符。

高级用法

  1. 当 vueIndex 的传入值为一个已经存在的 g3d 的图层的 vueIndex 的时候,则默认采取该 g3d 图层作为分层分户组件的数据源
  2. 如果参数 layers 传入并且有值,则下拉列表中手动选择对应的数据源执行分层分户

layers

# outStyle

  • 类型: Object
  • 可选
  • 非侦听属性
  • 描述: 分层分户组件外部 class 的样式
  • 默认值:
{
   position: "absolute",
   zIndex: 1000,
   padding: "0px",
   margin: "0px",
   height: "450px",
   width: "270px",
   top: "0px",
   left: "0px"
}

# layers

  • 类型: Array
  • 可选
  • 非侦听属性
  • 描述: 分层分户的图层列表, 每个子项内部 { title, vueIndex }
  • 默认值: []

    TIP

  1. 当前数据如下所示:
    <template>
      <mapgis-web-scene>
        <mapgis-3d-scene-layer vueIndex="test_g3d_layer_1" />
        <mapgis-3d-scene-layer vueIndex="test_g3d_layer_2" />
        <mapgis-3d-stratified-household :layers="layers" />
        <mapgis-3d-statebar />
      </mapgis-web-scene>
    </template>
    
  2. 当前传参如下所示:
    [
      {
        title: "BIM-1栋",
        vueIndex: "test_g3d_layer_1",
      },
      {
        title: "BIM-2栋",
        vueIndex: "test_g3d_layer_2",
      },
    ];
    
  3. 界面候选如下所示

layers :::

# enablePopup

  • 类型: Boolean
  • 可选
  • 非侦听属性
  • 描述: 是否激活查询弹窗
  • 默认值: false

# popupOptions

  • *类型: Object
  • 描述 popup 可选样式
{
  "title": "name", //主标题字段名称
  "popupType": "table", // table card rich-text
  "fullHeight": 400 // rich-text全屏高度
}
属性表格 (table) 卡片 (card) 图文关联 (rich-text)
属性表格 卡片 图文关联

# enableCollapse

  • 类型: Boolean
  • 可选
  • 非侦听属性
  • 描述: 是否允许收缩隐藏到一个小的圆型样式
  • 默认值: true 收缩样式

# enableStratifiedHouse

  • 类型: Boolean
  • 可选
  • 非侦听属性
  • 描述: 是否激活分层分户
  • 默认值: false

# enableDynamicQuery

  • 类型: Boolean
  • 可选
  • 非侦听属性
  • 描述: 是否激活动态单体化查询
  • 默认值: false

# 事件

# @loaded

  • Description: 在 分层分户 数据加载完毕并且图层选择后 发送该事件
  • Payload { component }
    1. component 组件的 this 环境,this 句柄

# 数据制作要求

  1. 数据必须是静态单体化且提前多层实现

    静态单体化 缓存图层

  2. 必须针对地图场景添加拓展字段

    拓展字段

    拓展字段

    拓展字段必须前后端保持一致,默认的是 IsStratified

  3. 前端必须获取到对应的拓展字段

import { G3D } from "@mapgis/webclient-es6-service";
const { G3DMapDoc } = G3D;
let result;

let g3dService = new G3DMapDoc({
  ip: "192.168.199.71",
  port: "8089",
  docName: "G3D_分层分户",
  extendedPropKeys: "IsStratified,Expand", // 逗号分割, *表示显示全部拓展字段
});

g3dService.GetDocInfo((res) => {
  result = res;
});

// 结果展示
const result = {
  docName: "G3D_分层分户",
  sceneInfos: [
    {
      extendedProps: {
        Expand: "true", // 注意此处是字符串,而不是布尔型,需要主动转换处理
        IsStratified: "true", // 注意此处是字符串,而不是布尔型,需要主动转换处理
      },
      layerCount: 10,
      layers: [],
      sceneName: "G3D_分层分户",
    },
  ],
};