new IGSFeatureLayer(options)
IGS 要素图层。
用于接入 IGS FeatureServer 或 GDBP 数据源并加载矢量要素,支持客户端/服务端渲染、过滤与样式控制。 图层会在加载阶段自动解析服务元信息与空间参考系,建议在图层加载完成后执行查询与专题图配置。
| Name | Type | Default | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
Object | {} |
可选
构造参数
|
Fires
- Layer#event:layerview-created
- Layer#event:layerview-remove
- Layer#event:layer-update
- IGSFeatureLayer#event:layerview-update
Examples
// ES5引入方式
const { IGSFeatureLayer } = zondy.layer
// ES6引入方式
import { IGSFeatureLayer} from "@mapgis/webclient-common"
// 添加图层
const igsFeatureLayer = new IGSFeatureLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer'
})
// ES5引入方式
const { IGSFeatureLayer } = zondy.layer
// ES6引入方式
import { IGSFeatureLayer} from "@mapgis/webclient-common"
// 添加图层
const igsFeatureLayer = new IGSFeatureLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer',
// 指定图层id
sublayerId: 2
})
添加IGS要素图层-在基地址中指定图层id
// ES5引入方式
const { IGSFeatureLayer } = zondy.layer
// ES6引入方式
import { IGSFeatureLayer} from "@mapgis/webclient-common"
const igsFeatureLayer = new IGSFeatureLayer({
// 服务基地址,再基地址上指定图层id
url: 'http://{ip}:{port}/igs/rest/mrfs/docs/{ServiceName}',
// 图层id
sublayerId: '1'
})
map.remove(igsFeatureLayer)
// ES5引入方式
const { IGSFeatureLayer } = zondy.layer
// ES6引入方式
import { IGSFeatureLayer} from "@mapgis/webclient-common"
// 在初始化时设置
const igsFeatureLayer = new IGSFeatureLayer({
// 服务基地址,再基地址上指定图层id
url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer/1',
// 设置透明度
opacity: 1
})
// 在图层加载完毕后设置
igsFeatureLayer.opacity = 0.5
// ES5引入方式
const { IGSFeatureLayer } = zondy.layer
// ES6引入方式
import { IGSFeatureLayer} from "@mapgis/webclient-common"
// 在初始化时设置
const igsFeatureLayer = new IGSFeatureLayer({
// 服务基地址,再基地址上指定图层id
url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer/1',
// 设置图层可见性
visible: true
})
// 在图层加载完毕后设置
igsFeatureLayer.visible = !igsFeatureLayer.visible
// 加载完毕后,更改图层顺序
map.reorder(igsFeatureLayer, '要移动到的index');
// ES5引入方式
const { IGSFeatureLayer } = zondy.layer
const { UniqueValueRenderer } = zondy.renderer
const { SimpleFillSymbol,SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { IGSFeatureLayer,UniqueValueRenderer,SimpleFillSymbol,SimpleLineSymbol,Color } from "@mapgis/webclient-common"
const igsFeatureLayer = new IGSFeatureLayer({
// 服务基地址,当不指定图层名称时,默认查询第一个子图层
url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer',
// 设置渲染样式-单值专题图
renderer: new UniqueValueRenderer({
// 专题图过滤字段名
field: '字段名',
// 默认样式,当没有匹配到指定值时,会使用默认样式
// 因为该数据的几何类型为区,因此设置区样式
defaultSymbol: new SimpleFillSymbol({
// 填充颜色
color: new Color(255, 0, 0),
// 外边线样式
outline: new SimpleLineSymbol({
// 线颜色
color: new Color(0, 0, 0),
// 线宽
width: 1
})
}),
// 单值专题图过滤条件数组
uniqueValueInfos: [
{
//指定字段值
value: '过滤字段值1',
//匹配到该值后的样式
// 因为该数据的几何类型为区,因此设置区样式
symbol: new SimpleFillSymbol({
// 填充颜色
color: new Color(255, 0, 0)
})
},
{
//指定字段值
// 因为该数据的几何类型为区,因此设置区样式
value: '过滤字段值2',
//匹配到该值后的样式
// 因为该数据的几何类型为区,因此设置区样式
symbol: new SimpleFillSymbol({
// 填充颜色
color: 'rgb(255, 123, 220)'
})
}
]
})
})
// ES5引入方式
const { IGSFeatureLayer } = zondy.layer
const { ClassBreakRenderer } = zondy.renderer
const { SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { IGSFeatureLayer,ClassBreakRenderer,SimpleLineSymbol,Color } from "@mapgis/webclient-common"
const igsFeatureLayer = new IGSFeatureLayer({
// 服务基地址,当不指定图层名称时,默认查询第一个子图层
url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer',
// 设置渲染样式-分段专题图
renderer: new ClassBreakRenderer({
// 专题图过滤字段名
field: '字段名',
// 默认样式,当没有匹配到指定值时,会使用默认样式
// 因为该数据的几何类型为线,因此设置线样式
defaultSymbol: new SimpleLineSymbol({
// 线符号颜色
color: new Color(1, 244, 0),
// 线宽
width: 3
}),
// 分段专题图过滤条件数组
classBreakInfos: [
{
// 最小过滤范围,field对应的值大于等于minValue
minValue: 0,
// 最大过滤范围,field对应的值小于maxValue
maxValue: 2,
// 匹配到该值后的样式
// 因为该数据的几何类型为线,因此设置线样式
symbol: new SimpleLineSymbol({
// 线符号颜色
color: new Color(1, 244, 0),
// 线宽
width: 3
})
},
{
// 最小过滤范围,field对应的值大于等于minValue
minValue: 3,
// 最大过滤范围,field对应的值小于maxValue
maxValue: 5,
// 匹配到该值后的样式
// 因为该数据的几何类型为线,因此设置线样式
symbol: new SimpleLineSymbol({
// 线符号颜色
color: new Color(111, 144, 10),
// 线宽
width: 3
})
},
{
// 最小过滤范围,field对应的值大于等于minValue
minValue: 5,
// 最大过滤范围,field对应的值小于maxValue
maxValue: 7,
// 匹配到该值后的样式
// 因为该数据的几何类型为线,因此设置线样式
symbol: new SimpleLineSymbol({
// 线符号颜色
color: new Color(22, 244, 10),
// 线宽
width: 3
})
},
{
// 最小过滤范围,field对应的值大于等于minValue
minValue: 7,
// 最大过滤范围,field对应的值小于maxValue
maxValue: 9,
// 匹配到该值后的样式
// 因为该数据的几何类型为线,因此设置线样式
symbol: new SimpleLineSymbol({
// 线符号颜色
color: new Color(33, 44, 10),
// 线宽
width: 3
})
},
{
// 最小过滤范围,field对应的值大于等于minValue
minValue: 9,
// 最大过滤范围,field对应的值小于maxValue
maxValue: 20,
// 匹配到该值后的样式
// 因为该数据的几何类型为线,因此设置线样式
symbol: new SimpleLineSymbol({
// 线符号颜色
color: new ZColor(123, 124, 110),
// 线宽
width: 3
})
}
]
})
})
// ES5引入方式
const { IGSFeatureLayer } = zondy.layer
const { SimpleRenderer } = zondy.renderer
const { SimpleFillSymbol,SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { IGSFeatureLayer,SimpleRenderer,SimpleFillSymbol,SimpleLineSymbol,Color } from "@mapgis/webclient-common"
const igsFeatureLayer = new IGSFeatureLayer({
// 服务基地址,当不指定图层名称时,默认查询第一个子图层
url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer',
// 设置渲染样式-统一专题图
renderer: new SimpleRenderer({
// 因为该数据的几何类型为区,因此设置区样式
symbol: new SimpleFillSymbol({
// 填充颜色
color: new Color(255, 0, 0),
// 外边线样式
outline: new SimpleLineSymbol({
// 线颜色
color: new Color(0, 0, 0),
// 线宽度
width: 1
})
})
})
})
// ES5引入方式
const { IGSFeatureLayer } = zondy.layer
// ES6引入方式
import { IGSFeatureLayer } from "@mapgis/webclient-common"
const igsFeatureLayer = new IGSFeatureLayer({
// 服务基地址,该地址为要素服务1.0地址
url: "http://{ip}:{port}/igs/rest/mrfs/layer",
// gdbp地址,在桌面的数据库中右键简单要素类,来获取该地址
gdbp: "gdbp://MapGisLocal/武汉市/ds/4326矢量/sfcls/武汉市区划4326"
})
// ES5引入方式
const { IGSFeatureLayer } = zondy.layer
// ES6引入方式
import { IGSFeatureLayer } from "@mapgis/webclient-common"
const igsFeatureLayer = new IGSFeatureLayer({
// IGS2.0资源服务地址,gdbp要素图层通过ResourceServer加载元信息和出图
url: "http://{ip}:{port}/igs/rest/services/system/ResourceServer",
// gdbp地址
gdbp: "gdbp://MapGisLocal/武汉市/ds/4326矢量/sfcls/武汉市区划4326",
// 可设置为client或server,server模式不支持renderer
renderMode: "server"
})
// ES5引入方式
const { igsFeatureLayer } = zondy.layer
const { LabelClass ,Font} = zondy
const { TextSymbol } = zondy.symbol
// ES6引入方式
import { igsFeatureLayer,LabelClass,Font,TextSymbol } from "@mapgis/webclient-common"
// 初始化LabelClass
const labelClass = new LabelClass({
// 指定文本符号样式
symbol: new TextSymbol({
// 文字颜色
color: new Color(252, 100, 22, 1),
// 文字样式
font: new Font({
// 字体
family: "微软雅黑",
// 文字大小,单位像素
size: 30,
// 文字是否为斜体,正常模式
style: "normal",
// 文字粗细
weight: "normal"
})
})
})
// 初始化IGS要素图层
const igsFeatureLayer = new igsFeatureLayer({
// 服务基地址,当不指定图层名称时,默认查询第一个子图层
url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer',
// 可在此处设置渲染样式
renderer: {},
// 启用注记
labelsVisible: true,
// 设置注记样式
labelingInfo: [labelClass]
})
Extends
Members
-
definitionExpressionString
-
要素过滤条件,类似sql语句
-
elevationInfoElevationInfo
-
高程模式参数
-
fieldsArray.<Object>
-
要素集字段信息
-
gdbpString
-
gdbp数据源
-
geometryTypeGeometryType
-
几何类型
-
labelingInfoArray.<LabelClass>
-
注记样式数组,默认取数组的第一个样式,仅支持三维动态注记渲染
-
labelsVisibleBoolean
-
是否开启动态注记,仅支持三维动态注记渲染
-
outFieldsArray.<String>
-
服务器请求返回要素时,要素中包含的字段,默认为null,表示请求全字段。筛选要素字段可以通过数组传递,例如["NAME", "GDP2016", "GDP2017", "GDP2018"]
-
renderModeString
-
渲染模式,支持客户端渲染'client';服务器端渲染'server'(不支持renderer),目前仅当gdbp存在时,server模式生效;网格化渲染'grid'(目前仅支持cesium、leaflet引擎,解决大数据量要素渲染问题,设置renderer时不支持聚类渲染器以及热力图渲染器)
-
rendererBaseRenderer Object
-
渲染器
-
serverFilterFeatureFilter
-
服务器端过滤选项
-
sublayerIdNumber String
-
要素图层id
-
supportArc3Boolean
-
是否返回三点弧段数据,为true则返回三个点代表三点弧段,否则返回离散的点
-
timeExtentTimeExtent
-
时间范围,具有明确开始和结束日期的一段时间(仅支持renderMode为'grid'模式)。时间范围用于显示或查询指定时间段内的要素。要表示某个时刻,需要将开始时间和结束时间设置为同一日期。
-
timeInfoTimeInfo null
-
对于数据时间维度信息的描述。
-
typeLayerType
-
图层类型
-
urlString
-
图层基地址
Events
-
layerview-update
document/layer/igserver/IGSFeatureLayer.js, line 433 -
图层样式更新语义事件(基于 layerview-update)。
该语义不是独立事件名,请监听
layerview-update并通过updateContent.name === 'renderer'识别。Properties:
Name Type Description eventObject 事件对象
Properties
Name Type Default Description typeString 'layerview-update' 可选 图层更新完毕事件
messageString null 可选 更新描述
updateContentArray.<UpdateContent> null 可选 更新详情对象
layerLayer null 可选 地图图层对象
layerViewMapView null 可选 图层的视图对象
sourceTargetLayer null 可选 事件发起对象
targetMap null 可选 事件接收对象
Example
图层样式更新完毕事件
Layer.on('layerview-update', function (event) { // 获取更新事件对象 console.log("更新完毕:", event) // 获取更新详情数组 const updateContent = event.updateContent // 循环数组,根据事件名进行后续操作 for (let i = 0; i < updateContent.length; i++) { // 图层样式更新完毕事件 if(updateContent[i].name === 'renderer'){ console.log("图层样式更新完毕事件:", event); } } });
Methods
-
clone(){IGSFeatureLayer}
document/layer/igserver/IGSFeatureLayer.js, line 1043 -
克隆IGSFeatureLayer对象
Returns:
Type Description IGSFeatureLayer 克隆后的IGSFeatureLayer实例 -
load(){Promise.<IGSFeatureLayer>}
document/layer/igserver/IGSFeatureLayer.js, line 774 -
加载图层资源
Returns:
Type Description Promise.<IGSFeatureLayer> Example
不加载图层,仅获取图层信息 // 初始化图层 const igsFeatureLayer = new zondy.layer.IGSFeatureLayer({ // 服务基地址 url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/FeatureServer', }); igsFeatureLayer.load().then((result) => { // 获取完图层信息 console.log(result) }) -
queryFeatures(queryOptions){Promise.<FeatureSet>}
document/layer/igserver/IGSFeatureLayer.js, line 944 -
指定图层的要素查询
Name Type Description queryOptionsObject 参考此接口的入参
FeatureServer#queryFeaturesReturns:
Type Description Promise.<FeatureSet> Example
指定图层的要素查询 igsFeatureLayer.queryFeatures({ // 图层id layerId: '0', // where语句 where: "NAME='天门市'" }).then((result) => { console.log('查询结果:', result) }) -
queryFeaturesCount(queryOptions){Promise.<Number>}
document/layer/igserver/IGSFeatureLayer.js, line 971 -
查询要素数量
Name Type Description queryOptionsObject 参考此接口的入参
FeatureServer#queryFeaturesReturns:
Type Description Promise.<Number> Example
查询要素数量 igsFeatureLayer.queryFeaturesCount({ // 图层id layerId: '0' }).then((result) => { console.log('查询结果:', result) }) -
refresh(){*}
document/layer/igserver/IGSFeatureLayer.js, line 1236 -
刷新图层。
Returns:
Type Description * -
toJSON(){Object}
document/layer/igserver/IGSFeatureLayer.js, line 1015 -
转换为 JSON 对象
Returns:
Type Description Object JSON 对象 -
IGSFeatureLayer.fromJSON(json){IGSFeatureLayer}
document/layer/igserver/IGSFeatureLayer.js, line 997 -
通过传入的 JSON 构造并返回一个新的图层对象
Name Type Description jsonObject 可选 JSON 对象
Returns:
Type Description IGSFeatureLayer 新的 IGSFeatureLayer 对象 Example
通过传入的 JSON 构造并返回一个新的图层对象 const json = { // 服务基地址 url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/FeatureServer', } const igsFeatureLayer = zondy.layer.IGSFeatureLayer.fromJSON(json)