# IGServer 要素图层
mapgis-3d-igs-Feature-layer
注意:由于三维底层支持原因,目前仅支持 4326 坐标系的要素图层,
若要实现 3857 坐标系要素查询,则需要在矢量地图文档发布前, 在 igserver 桌面端先动态投影成经纬度,再发布地图文档。 目前三维底层暂时只支持二维矢量文档,后期会补充其他形式。
# 属性
# vueKey
- 类型:
String
- 可选
- 非侦听属性
- 默认值:
default
- 描述:
mapgis-web-scene 组件的 ID,当使用多个 mapgis-web-scene 组件时,需要指定该值,来唯一标识 mapgis-web-scene 组件,
同时 mapgis-web-scene 插槽中的组件也需要传入相同的 vueKey,让组件知道应该作用于哪一个 mapgis-web-scene。
# vueIndex
类型:
Number
可选
非侦听属性
描述:
当 mapgis-web-scene 插槽中使用了多个相同组件时,例如多个 mapgis-3d-igs-doc-layer 组件,用来区分组件的标识符。
# baseUrl
类型:
String
必填
非侦听属性
描述:
服务基地址:发布的二维文档地址, eg:.NET IGServer地图文档地址:http://[host]:6163/igs/rest/mrfs/docs/{docName}/mapIndex/LayerIndex。 Java IGServer地图文档地址:http://[host]:8089/igs/rest/services/{docName}/FeatureServer/LayerIndex。 gdbp地址加载:http://[host]:6163/igs/rest/mrfs/layer
# gdbps
- 类型:
String
- 可选
- 非侦听属性
- 描述: 使用gdbp地址加载,eg:gdbp://MapGisLocal/IGS_OGC_EPSG_CRS/sfcls/{layerName},当且仅当baseUrl使用gdbp地址加载时,该参数才会生效
# autoReset
- 类型:
Boolean
- 可选
- 非侦听属性
- 默认值
true
- 描述: 初始加载时,视角是否自动跳转到图层中心
# renderer
- 类型:
Object
- 必选
- 非侦听属性
- 描述: 专题图渲染规则, 包含以下属性:
Name | Type | Description |
---|---|---|
type | String | 专题图类型,可选 "simple、unique-value、class-breaks" |
field | String | 专题图字段名称,用来确定单值或分段要素,仅在renderer.type="unique-value、class-breaks"时使用 |
legendOptions | Object | 专题图图例选项,用来在图例中展示符号所表达的信息,如专题图标题 |
symbol | Object | 统一专题图符号样式 |
label | String | 统一专题图标签 |
defaultSymbol | Object | 单值分段专题图默认符号样式,用来绘制具有与给定中断值不匹配的要素 |
defaultLabel | String | 单值、分段专题图默认标签,用来描述分配了默认符号的元素 |
uniqueValueInfos | Array | 专题图单值信息,仅在renderer.type="unique-value"时使用 |
classBreakInfos | Array | 专题图分段信息,仅在renderer.type="class-breaks"时使用 |
normalizationType | String | 专题图归一化类型,仅在render.type="class-breaks"时使用,可选 "field、"percent-of-total" |
normalizationField | String | 专题图根据字段归一化,即分段字段属性值 / 归一化字段属性值,如果renderer中定义了normalizationField,则优先执行normalizationField按字段归一化,通过归一化出的结果和分段专题图停靠点的值进行比较,若仅定义normalizationType未定义normalizationField,则不进行归一化,使用场景:如 区域人口数 / 该区域面积,返回该区域人口密度,根据人口密度绘制分段专题图 |
normalizationTotal | Number | 专题图根据属性值总和归一化,即分段字段属性值 / 给定总和,如果renderer中定义了normalizationTotal,则优先执行normalizationTotal按字段值总和归一化,通过归一化出的结果和分段专题图停靠点的值进行比较,若仅定义normalizationType未定义normalizationTotal,则使用 分段字段属性值 / 分段字段属性值总和 进行归一化,使用场景:如 区域GDP总量 / 所有区域GDP总量和,返回该区域GDP占比,根据GDP占比绘制分段专题图 |
valueExpression | String | 专题图计算表达式,用来对要素中的单/多个属性进行数学计算,属性字段使用"$feature.field"表示,如"[($feature.lg + 2) * 10 - 20 / 2] / 5 + $feature.mpLayer",如果renderer中定义了valueExpression,则优先执行valueExpression表达式,通过表达式计算出来的结果和单值/分段专题图停靠点的值进行比较 |
valueExpressionTitle | String | 专题图计算表达式标题 |
visualVariables | Array | 专题图视觉变量 |
其中 symbol 对象中包括以下属性:
Name | Type | Description |
---|---|---|
type | String | 专题图符号样式类型,可选 "point-3d、line-3d、polygon-3d" |
symbolLayers | Number | 专题图符号图层,可选 "icon、line、fill、extrude" |
symbolLayers 对象中包括以下属性:
Name | Type | Description |
---|---|---|
type | String | 专题图符号图层类型,可选 "icon、line、fill、extrude" |
material | Object | 专题图要素样式 |
material.color | String | 专题图要素颜色 |
outline | Object | 专题图要素边线样式,当传入边线颜色或边线宽度参数时启用边线 |
outline.color | String | 专题图要素边线颜色,仅当 type="icon 或 fill"时生效 |
outline.width | Number | 专题图要素边线宽度,仅当 type="fill"时生效 |
resource | Object | 专题图要素绘制类型,未传入时默认绘制"circle"二维点 |
resource.primitive | String | 专题图要素绘制类型,可选"circle、billboard" |
resource.herf | String | 专题图要素图标符号,传入要素符号的url地址,支持"png、svg"类型 |
resource.sizeInMeters | Boolean | 专题图要素图标符号尺寸单位(米),默认值false |
resource.scale | Number | 专题图要素图标符号比例,仅当传入 resource.herf时生效,用于控制图标符号大小,默认值 1 |
resource.distanceDisplayCondition | Array | 专题图要素符号可见性,仅当传入 resource.herf时生效,用于控制图标的最大最小可见高度, 默认值 [10, 100000] |
size | Number | 符号尺寸,用于设置点要素大小和线要素宽度 |
uniqueValueInfos 对象中包括以下属性:
Name | Type | Description |
---|---|---|
value | String、Number | 指定字段下的要素值,具有此值的要素将使用给定的符号可视化 |
symbol | Object | 符号,用来渲染指定要素 |
label | String | 标签,用来描述符号表示的值 |
classBreakInfos 对象中包括以下属性:
Name | Type | Description |
---|---|---|
minValue | Number | 设置分段间隔的最小值 |
maxValue | Number | 设置分段间隔的最大值 |
symbol | Object | 符号,用来渲染分段间隔最小-最大值之间的要素 |
label | String | 标签,用来描述符号表示的值 |
visualVariables对象中包括以下属性:
Name | Type | Description |
---|---|---|
type | String | 专题图视觉变量类型,可选 "color、opacity" |
field | String | 专题图视觉变量字段,用于和停靠点比较来确定绘制符号,只能为数字类型字段 |
valueExpression | String | 专题图视觉变量计算表达式 |
valueExpressionTitle | String | 专题图视觉变量计算表达式标题 |
normalizationType | String | 专题图视觉变量归一化类型,"field、percent-of-total" |
normalizationField | String | 专题图视觉变量归一化字段,将renderer中对应字段数据值除以归一化字段数据值 |
normalizationTotal | Number | 专题图视觉变量归一化总和,将renderer中对应字段数据值除以给定值,若normalizationTotal未定义,则使用 字段属性值 / 字段属性值总和 进行归一化 |
stops | Array | 专题图视觉变量颜色、透明度数组,定义在一系列停靠点中应用于要素的连续色带的颜色 |
stops中包括以下属性:
Name | Type | Description |
---|---|---|
value | Number | 专题图视觉变量停靠点 |
color | String | 专题图视觉变量停靠点颜色,根据相邻停靠点间的属性字段值和颜色进行线性插值 |
label | String | 专题图视觉变量标签,用于生成图例 |
# clampToGround
- 类型:
Boolean
- 可选
- 非侦听属性
- 默认值
false
- 描述: 是否贴地,当加载三维地图文档或矢量白模时该属性无效
# filter
- 类型:
Object
- 可选
- 非侦听属性
- 描述: 过滤条件对象,空对象则默认无过滤。该对象中可传属性:
Name | Type | Default | Description |
---|---|---|---|
Where | String | 要素过滤条件 | |
geometryType | String | 几何类型,代表空间查询时传入的几何类型 | |
geometry | Object | 几何类型对应的图层信息,也就是构成几何类型的坐标信息。 |
- 示例:
filter: { where: `name = "新洲区"` }
# 事件
# @load
- Description: 在要素图层加载完毕后发送该事件
- Payload 事件载荷如下所示:
layerIndex
当前要素图层对象的图层索引数组
# @featureClick
- Description: 在要素图层加载完毕后鼠标左键点击图层触发
- Payload 事件载荷如下所示:
payload
鼠标左键点击拾取的要素
# @featureHover
- Description: 在要素图层加载完毕后鼠标悬浮在图层上触发
- Payload 事件载荷如下所示:
payload
鼠标悬浮拾取的要素
# 示例
# 绘制点要素 svg符号 分段专题图
<template>
<mapgis-web-scene>
<mapgis-3d-igs-feature-layer
:baseUrl="baseUrl"
:autoReset="autoReset"
:renderer="renderer"
:filter="filter"
>
</mapgis-3d-igs-feature-layer>
</mapgis-web-scene>
</template>
<script>
export default {
data() {
return {
//要加载的url,本地发布的二维文档,坐标系为4326
baseUrl: "http://192.168.81.98:8089/igs/rest/services/武汉市地图文档/FeatureServer/0",
autoReset: true,
renderer: new ClassBreaksRenderer({
type: "class-breaks",
legendOptions: {title: "武汉市POI点"},
field: "lg",
defaultSymbol: new PointSymbol3D({
type: 'point-3d',
symbolLayers: new IconSymbol3DLayer({
type: "icon",
material: { color: "#ffffff" },
resource: { herf: "http://localhost:8895/img/Church.svg", sizeInMeters: false, scale: 1.5, distanceDisplayCondition: [10, 1000000] },
size: 10.0
})
}),
defaultLabel: "Church",
classBreakInfos: [
{
maxValue: 2,
minValue: 1,
symbol: new PointSymbol3D({
type: 'point-3d',
symbolLayers: new IconSymbol3DLayer({
type: "icon",
material: { color: "#ffffff", },
resource: { herf: "http://localhost:8895/img/Museum.svg", sizeInMeters: false, scale: 1.5, distanceDisplayCondition: [10, 1000000] },
size: 10.0
})
}),
label: "Museum"
},
{
maxValue: 3,
minValue: 2,
symbol: new PointSymbol3D({
type: 'point-3d',
symbolLayers: new IconSymbol3DLayer({
type: "icon",
material: { color: "#ffffff", },
resource: { herf: "http://localhost:8895/img/Hotel.svg", sizeInMeters: false, scale: 1.5, distanceDisplayCondition: [10, 1000000] },
size: 10.0
})
}),
label: "Hotel"
},
{
maxValue: 4,
minValue: 3,
symbol: new PointSymbol3D({
type: 'point-3d',
symbolLayers: new IconSymbol3DLayer({
type: "icon",
material: { color: "#ffffff", },
resource: { herf: "http://localhost:8895/img/Park.svg", sizeInMeters: false, scale: 1.5, distanceDisplayCondition: [10, 1000000] },
size: 10.0
})
}),
label: "Park"
},
{
maxValue: 5,
minValue: 4,
symbol: new PointSymbol3D({
type: 'point-3d',
symbolLayers: new IconSymbol3DLayer({
type: "icon",
material: { color: "#ffffff", },
resource: { herf: "http://localhost:8895/img/Restaurant.svg", sizeInMeters: false, scale: 1.5, distanceDisplayCondition: [10, 1000000] },
size: 10.0
})
}),
label: "Restaurant"
},
],
}),
filter: { where: `lg >= 0` },
};
},
};
</script>