new IGSFeatureLayer(options)
支持如下方法:
[1、加载图层资源][2、指定图层的要素查询]
[3、查询要素数量]
[4、通过传入的json构造并返回一个新的几何对象]
5、导出为json对象6、克隆几何对象
IGS要素图层,
目前二维和三维上支持4326(包括4490,4214以及4610),3857以及EPSG支持的自定义坐标系,要素服务会自动读取元信息上的坐标系,不需要用户指定
[ES5引入方式]:
zondy.layer.IGSFeatureLayer()
[ES6引入方式]:
import { IGSFeatureLayer } from "@mapgis/webclient-common"
针对图层的操作请在图层加载完毕事件中进行
Layer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
});
如果不想在该事件中放入业务代码,则请确认图层资源已加载完毕后再进行操作
if(layer.loadStatus === 'loaded') {
// 你的业务逻辑
}
| Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
Object |
构造参数
|
Fires
- Layer#event:图层加载完毕事件
- Layer#event:图层销毁完毕事件
- Layer#event:图层更新完毕事件
- Layer#event:图层显隐更新完毕事件
- Layer#event:图层透明度更新完毕事件
- Layer#event:图层刷新完毕事件
- IGSFeatureLayer#event:图层样式更新完毕事件
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
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"]
-
rendererBaseRenderer Object
-
渲染器
-
renderModeString
-
渲染模式,分为客户端渲染'client'和服务器端渲染'server'
-
serverFilterFeatureFilter
-
服务器端过滤选项
-
sublayerIdNumber String
-
要素图层id
-
supportArc3Boolean
-
是否返回三点弧段数据,为true则返回三个点代表三点弧段,否则返回离散的点
-
timeExtentTimeExtent
-
时间范围,具有明确开始和结束日期的一段时间(仅支持renderMode为'grid'模式)。时间范围用于显示或查询指定时间段内的要素。要表示某个时刻,需要将开始时间和结束时间设置为同一日期。
-
timeInfoTimeInfo null
-
对于数据时间维度信息的描述。
-
typeLayerType
-
图层类型
-
urlString
-
图层基地址
Events
-
图层样式更新完毕事件
document/layer/igserver/IGSFeatureLayer.js, line 437 -
图层样式更新完毕事件,请注意该事件是图层更新事件(layerview-update)的子事件
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
-
IGSFeatureLayer.fromJSON(json)
document/layer/igserver/IGSFeatureLayer.js, line 1003 -
Name Type Description jsonObject 可选 JSON对象
Example
通过传入的json构造并返回一个新的几何对象 const json = { // 服务基地址 url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/FeatureServer', } const igsFeatureLayer = new zondy.layer.IGSFeatureLayer.fromJSON(json) -
clone(){IGSFeatureLayer}
document/layer/igserver/IGSFeatureLayer.js, line 1051 -
克隆IGSFeatureLayer对象
Returns:
Type Description IGSFeatureLayer 克隆后的IGSFeatureLayer实例 -
load(){Promise.<IGSFeatureLayer>}
document/layer/igserver/IGSFeatureLayer.js, line 798 -
加载图层资源
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 947 -
指定图层的要素查询
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 977 -
查询要素数量
Name Type Description queryOptionsObject 参考此接口的入参
FeatureServer#queryFeaturesReturns:
Type Description Promise.<Number> Example
查询要素数量 igsFeatureLayer.queryFeaturesCount({ // 图层id layerId: '0' }).then((result) => { console.log('查询结果:', result) }) -
toJSON(){Object}
document/layer/igserver/IGSFeatureLayer.js, line 1021 -
转换为json对象
Returns:
Type Description Object json对象