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>