new IGSMapImageLayer(options)
支持如下方法:
[1、加载图层资源][2、根据子图层id查询子图层]
3、刷新图层[4、根据范围和大小获取image标签]
[5、根据参数获取图片的url]
[6、更新子图层]
[7、将图层转为json对象]
[8、克隆图层对象]
IGS地图图片图层,
支持IGS1.0和2.0两个服务版本
[ES5引入方式]:
zondy.layer.IGSMapImageLayer()
[ES6引入方式]:
import { IGSMapImageLayer } 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:图层顺序更新完毕事件
- Layer#event:图层刷新完毕事件
- IGSMapImageLayer#event:子图层显隐更新完毕事件
Examples
// ES5引入方式
const { SpatialReference } = zondy
const { IGSMapImageLayer } = zondy.layer
// ES6引入方式
import { SpatialReference,IGSMapImageLayer } from "@mapgis/webclient-common"
// 添加图层
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:6163/igs/rest/mrms/docs/{serviceName}',
});
// ES5引入方式
const { IGSMapImageLayer } = zondy.layer
// ES6引入方式
import { IGSMapImageLayer } from "@mapgis/webclient-common"
// 添加图层
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer'
});
// ES5引入方式
const { SpatialReference} = zondy
const { IGSMapImageLayer } = zondy.layer
// ES6引入方式
import { SpatialReference,IGSMapImageLayer } from "@mapgis/webclient-common"
// 添加图层
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer',
// 自定义坐标新
spatialReference: new SpatialReference({
// 指定的wkid号,可在https://epsg.io/网站查询
wkid: '指定的wkid号'
})
});
// ES5引入方式
const { IGSMapImageLayer } = zondy.layer
// ES6引入方式
import { IGSMapImageLayer } from "@mapgis/webclient-common"
// 添加图层
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer',
// 瓦片宽度
imageWidth: 512,
// 瓦片高度
imageHeight: 512
});
// ES5引入方式
const { IGSMapImageLayer } = zondy.layer
// ES6引入方式
import { IGSMapImageLayer } from "@mapgis/webclient-common"
// 添加图层
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer'
});
// ES5引入方式
const { IGSMapImageLayer } = zondy.layer
// ES6引入方式
import { IGSMapImageLayer } from "@mapgis/webclient-common"
// 添加图层
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer',
// 根据id显示子图层
sublayers: [
{
// 子图层id
id: 1,
// 显示子图层
visible: true
},
{
id: 2,
sublayers: [{
id: '2-23',
visible: true
}]
}
]
});
// ES5引入方式
const { IGSMapImageLayer } = zondy.layer
// ES6引入方式
import { IGSMapImageLayer } from "@mapgis/webclient-common"
// 添加图层
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer'
});
map.add(igsMapImageLayer);
// 通过方法设置子图层显隐
igsMapImageLayer.setSubLayer({
id: 0,
visible: false
})
// ES5引入方式
const { IGSMapImageLayer } = zondy.layer
// ES6引入方式
import { IGSMapImageLayer } from "@mapgis/webclient-common"
// 添加图层
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer'
});
// 根据id获取子图层
const subLayer = igsMapImageLayer.findSublayerById(0)
// 设置子图层显隐
subLayer.visible = false
// ES5引入方式
const { IGSMapImageLayer } = zondy.layer
// ES6引入方式
import { IGSMapImageLayer } from "@mapgis/webclient-common"
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer'
});
map.add(igsMapImageLayer);
// 根据id获取子图层
const subLayer = igsMapImageLayer.findSublayerById(0)
// 设置子图层顺序
subLayer.index = 2
// ES5引入方式
const { IGSMapImageLayer } = zondy.layer
const { UniqueValueRenderer } = zondy.renderer
const { SimpleFillSymbol,SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { IGSMapImageLayer,UniqueValueRenderer,SimpleFillSymbol,SimpleLineSymbol,Color } from "@mapgis/webclient-common"
igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer',
// 设置子图层专题图
sublayers: [
{
// 子图层id
id: '子图层id',
// 专题图参数
renderer: new UniqueValueRenderer({
//字段名
field: '你的字段名',
// 默认符号,不在专题图指定范围内的会采用该样式,可不设置
defaultSymbol: new SimpleFillSymbol({
// 填充颜色
color: 'rgba(1,1,252,0)',
// 外边线样式
outline: new SimpleLineSymbol({
//线颜色
color: new Color(255, 1, 0, 1),
//线宽
width: 1
})
}),
//单值专题图字段样式
uniqueValueInfos: [{
//指定字段值
value: "指定的值",
//匹配到该值后的样式
symbol: new SimpleFillSymbol({
// 填充颜色
color: 'rgba(1,1,252,1)',
// 外边线样式
outline: new SimpleLineSymbol({
//线符号颜色
color: new Color(255, 1, 0, 11),
//线宽
width: 1
})
})
},{
//指定字段值
value: "指定的值",
//匹配到该值后的样式
symbol: new SimpleFillSymbol({
// 填充颜色
color: new Color(211, 111, 11, 1)
})
}]
})
}
]
});
// ES5引入方式
const { IGSMapImageLayer } = zondy.layer
const { ClassBreakRenderer } = zondy.renderer
const { SimpleFillSymbol,SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { IGSMapImageLayer,ClassBreakRenderer,SimpleFillSymbol,SimpleLineSymbol,Color } from "@mapgis/webclient-common"
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer',
// 设置子图层专题图
sublayers: [
{
// 子图层id
id: '子图层id',
// 专题图参数
renderer: new ClassBreakRenderer({
//字段名
field: '你的字段名',
// 指定默认样式,不在专题图指定范围内的会采用该样式,可不设置
defaultSymbol: new SimpleFillSymbol({
// 填充颜色
color: 'rgba(222,1,252,1)',
// 线符号样式
outline: new SimpleLineSymbol({
//线符号颜色
color: new Color(255, 1, 0, 1),
//线宽
width: 1
})
}),
//单值专题图字段样式
classBreakInfos: [{
// 最大范围
maxValue: "最大范围",
// 最小范围
minValue: "最小范围",
//匹配到该值后的样式
symbol: new SimpleFillSymbol({
// 填充颜色
color: 'rgba(1,1,252,1)',
// 线符号样式
outline: new SimpleLineSymbol({
//线符号颜色
color: new Color(255, 1, 0, 1),
//线宽
width: 1
})
})
}]
})
}
]
});
// ES5引入方式
const { IGSMapImageLayer } = zondy.layer
const { ClassBreakRenderer } = zondy.renderer
const { SimpleFillSymbol,SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { IGSMapImageLayer,ClassBreakRenderer,SimpleFillSymbol,SimpleLineSymbol,Color } from "@mapgis/webclient-common"
const igsMapImageLayer = new zondy.layer.IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer'
});
// 设置子图层专题图
igsMapImageLayer.setSubLayer({
// 子图层id
id: '子图层id',
// 专题图参数
renderer: new zondy.renderer.ClassBreakRenderer({
//字段名
field: '你的字段名',
// 指定默认样式,不在专题图指定范围内的会采用该样式,可不设置
defaultSymbol: new zondy.symbol.SimpleFillSymbol({
// 填充颜色
color: 'rgba(222,1,252,1)',
// 线符号样式
outline: new zondy.symbol.SimpleLineSymbol({
//线符号颜色
color: new zondy.Color(255, 1, 0, 1),
//线宽
width: 1
})
}),
//单值专题图字段样式
classBreakInfos: [{
// 最大范围
maxValue: "最大范围",
// 最小范围
minValue: "最小范围",
//匹配到该值后的样式
symbol: new zondy.symbol.SimpleFillSymbol({
// 填充颜色
color: 'rgba(1,1,252,1)',
// 线符号样式
outline: new zondy.symbol.SimpleLineSymbol({
//线符号颜色
color: new zondy.Color(255, 1, 0, 1),
//线宽
width: 1
})
})
}]
})
})
// ES5引入方式
const { IGSMapImageLayer } = zondy.layer
const { ClassBreakRenderer } = zondy.renderer
const { SimpleFillSymbol,SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { IGSMapImageLayer,ClassBreakRenderer,SimpleFillSymbol,SimpleLineSymbol,Color } from "@mapgis/webclient-common"
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer'
});
// 根据id获取子图层
const subLayer = igsMapImageLayer.findSublayerById(0)
// 设置子图专题图
subLayer.renderer = new ClassBreakRenderer({
//字段名
field: '你的字段名',
// 指定默认样式,不在专题图指定范围内的会采用该样式,可不设置
defaultSymbol: new SimpleFillSymbol({
// 填充颜色
color: 'rgba(222,1,252,1)',
// 线符号样式
outline: new SimpleLineSymbol({
//线符号颜色
color: new Color(255, 1, 0, 1),
//线宽
width: 1
})
}),
//单值专题图字段样式
classBreakInfos: [{
// 最大范围
maxValue: "最大范围",
// 最小范围
minValue: "最小范围",
//匹配到该值后的样式
symbol: new SimpleFillSymbol({
// 填充颜色
color: 'rgba(1,1,252,1)',
// 线符号样式
outline: new SimpleLineSymbol({
//线符号颜色
color: new Color(255, 1, 0, 1),
//线宽
width: 1
})
})
}]
})
// ES5引入方式
const { IGSMapImageLayer } = zondy.layer
// ES6引入方式
import { IGSMapImageLayer } from "@mapgis/webclient-common"
// 初始化时设置
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer',
// 设置透明度
opacity: 1.0
});
// 加载完成后设置
igsMapImageLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 视点跳转
igsMapImageLayer.opacity = 0.5
})
/ ES5引入方式
const { IGSMapImageLayer } = zondy.layer
// ES6引入方式
import { IGSMapImageLayer } from "@mapgis/webclient-common"
// 初始化时设置
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer',
// 显示或隐藏图层
visible: true
});
// 加载完成后设置
igsMapImageLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 显示或隐藏图层
igsMapImageLayer.visible = !igsMapImageLayer.visible
})
map.remove(igsMapImageLayer)
/ ES5引入方式
const { IGSMapImageLayer } = zondy.layer
// ES6引入方式
import { IGSMapImageLayer } from "@mapgis/webclient-common"
// 初始化时设置
const igsMapImageLayer = new IGSMapImageLayer({
// 服务基地址,可指定子图层id
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer/{子图层id}',
// 显示或隐藏图层
visible: true
});
// 初始化图层管理容器
/ ES5引入方式
const { SpatialReference} = zondy
const { IGSMapImageLayer} = zondy.layer
// ES6引入方式
import { SpatialReference, IGSMapImageLayer } from "@mapgis/webclient-common"
const arcgisMapImageLayer = new IGSMapImageLayer({
url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer',
// 注意一个MapImage图层可能支持多个坐标系,这里指定4326坐标系
spatialReference: new SpatialReference({
wkid: 4326
})
});
// 图层加载完毕
igsMapImageLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
})
// 加载完毕后,更改图层顺序
map.reorder(igsMapImageLayer, '要移动到的index');
Extends
Members
-
allSublayersCollection
-
所有子图层对象信息
-
clientIdString
-
客户端Id
-
clippingAreaPolygon Extent Circle MultiPolygon null
-
空间裁剪范围
-
descriptionString
-
图层描述
-
disableHiRenderBoolean
-
是否禁用快显服务,仅当图层的isSupportHiRender属性为true时生效
-
documentInfoObject
-
地图文档信息
-
dynamicProjectionEnabledBoolean
-
是否开启动态投影
-
imageFormatString
-
图片格式
-
imageFormatsArray
-
图片格式数组,表示服务支持的所有图片格式
-
imageHeightNumber
-
瓦片化显示时,瓦片高度
-
imageTransparencyBoolean
-
图片中没有数据的地方是否透明
-
imageWidthNumber
-
瓦片化显示时,瓦片宽度
-
isAntialiasingBoolean undefined
-
是否开启服务端抗锯齿.返回的图片是否抗锯齿,启用抗锯齿功能后,会导致出图速度变慢,true表示开启抗锯齿,false表示关闭抗锯齿,如果没有设置,则默认应用地图文档(MapX)上的设置
-
isSupportHiRenderBoolean
-
服务端是否支持快显,仅当isSupportHiRender为true时,disableHiRender属性才生效
-
mapNameString
-
地图名称
-
renderModeString
-
渲染模式,分为瓦片渲染'tile'和图像渲染'image'
-
sublayersCollection null Object
-
子图层对象
-
typeLayerType
-
图层类型
-
urlString
-
服务基地址
Events
-
子图层显隐更新完毕事件
document/layer/igserver/IGSMapImageLayer.js, line 550 -
子图层显隐更新完毕事件,请注意该事件是图层更新事件(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 === 'sublayerVisible'){ console.log("子图层显隐更新完毕事件:", event); } } });
Methods
-
IGSMapImageLayer.clone(igsMapImageLayer){IGSMapImageLayer}
document/layer/igserver/IGSMapImageLayer.js, line 1235 -
克隆图层对象
Name Type Description igsMapImageLayerIGSMapImageLayer 被克隆的对象
Returns:
Type Description IGSMapImageLayer 克隆后的图层对象 Example
根据参数获取图片的url // 添加图层 const igsMapImageLayer = new zondy.layer.IGSMapImageLayer({ // 服务基地址 url: 'http://{ip}:6163/igs/rest/mrms/docs/{serviceName}' }); const newLayer = zondy.layer.IGSMapImageLayer.clone(igsMapImageLayer) -
IGSMapImageLayer.fromJSON(json){IGSMapImageLayer}
document/layer/igserver/IGSMapImageLayer.js, line 1298 -
通过json对象构造并返回一个IGSMapImageLayer对象
Name Type Description jsonObject json对象
Returns:
Type Description IGSMapImageLayer 新的IGSMapImageLayer对象 -
_convertCatalogLayers(catalogLayers){Array}
document/layer/igserver/IGSMapImageLayer.js, line 980 -
将1.0服务图层元信息转换为2.0服务图层元信息
Name Type Description catalogLayersArray.<Object> Returns:
Type Description Array -
clone(){IGSMapImageLayer}
document/layer/igserver/IGSMapImageLayer.js, line 1308 -
克隆IGSMapImageLayer对象
Returns:
Type Description IGSMapImageLayer 克隆后的IGSMapImageLayer实例 -
fetchImage(extent, width, height){Promise}
document/layer/igserver/IGSMapImageLayer.js, line 1169 -
根据范围和大小获取image标签
Name Type Default Description extentExtent 范围参数
widthNumber 256 可选 图片宽度,单位px
heightNumber 256 可选 图片高度,单位px
Returns:
Type Description Promise 请求完毕的返回Promise Example
根据范围和大小获取image标签 igsMapImageLayer.fetchImage({ // 你的范围 extent: new zondy.geometry.Extent(), // 图片宽度 width: 256, // 图片高度 height: 256 }).then((image) => { // 这里返回一个html的image标签 }) -
findSublayerById(id){IGSMapImageSubLayer|null}
document/layer/igserver/IGSMapImageLayer.js, line 1142 -
Name Type Description idString 子图层id
Returns:
Type Description IGSMapImageSubLayer | null 子图层信息 -
getImageUrl(options){String}
document/layer/igserver/IGSMapImageLayer.js, line 1204 -
根据参数获取图片的url
Name Type Description optionsName Type Description extentExtent 可选 图片范围
widthNumber 可选 图片宽度
heightNumber 可选 图片高度
Returns:
Type Description String 图片的url Example
根据参数获取图片的url const url = igsMapImageLayer.getImageUrl({ // 你的范围 extent: new zondy.geometry.Extent(), // 图片宽度 width: 256, // 图片高度 height: 256 }) -
load()
document/layer/igserver/IGSMapImageLayer.js, line 805 -
加载图层资源
Example
不加载图层,仅获取图层信息 // 初始化图层 const igsMapImageLayer = new zondy.layer.IGSMapImageLayer({ // 服务基地址 url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer', }); igsMapImageLayer.load().then((result) => { // 获取完图层信息 console.log(result) }) -
setSubLayer(igsMapImageSubLayer)
document/layer/igserver/IGSMapImageLayer.js, line 1212 -
Name Type Description igsMapImageSubLayerIGSMapImageSubLayer 要更新的子图层
-
toJSON(){Object}
document/layer/igserver/IGSMapImageLayer.js, line 1285 -
转换为json对象
Returns:
Type Description Object json对象