# 分层分户
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 组件,用来区分组件的标识符。
高级用法
- 当 vueIndex 的传入值为一个已经存在的 g3d 的图层的 vueIndex 的时候,则默认采取该 g3d 图层作为分层分户组件的数据源
- 如果参数 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
- 当前数据如下所示:
<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>
- 当前传参如下所示:
[ { title: "BIM-1栋", vueIndex: "test_g3d_layer_1", }, { title: "BIM-2栋", vueIndex: "test_g3d_layer_2", }, ];
- 界面候选如下所示
:::
# 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 }
- component 组件的 this 环境,this 句柄
# 数据制作要求
数据必须是静态单体化且提前多层实现
必须针对地图场景添加拓展字段
拓展字段
拓展字段必须前后端保持一致,默认的是 IsStratified
前端必须获取到对应的拓展字段
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_分层分户",
},
],
};