# new ArcGISMapImageLayer(options)
ArcGIS地图图片图层，
目前二维上支持4326(包括4490，4214以及4610)，3857以及EPSG支持的自定义坐标系，三维上仅支持4326(包括4490，4214以及4610)以及3857坐标系，会自动读取元信息上的坐标系，不需要用户指定
[ES5引入方式]：
Zondy.Layer.ArcGISMapImageLayer()
[ES6引入方式]：
import { ArcGISMapImageLayer } from "@mapgis/webclient-common"
针对图层的操作请在图层加载完毕事件中进行
Layer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
});
如果不想在该事件中放入业务代码，则请确认图层资源已加载完毕后再进行操作
if(layer.loadStatus === 'loaded') {
// 你的业务逻辑
}
参数:
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
options |
Object | 构造参数 |
|
url |
String | 服务基地址， |
|
id |
String | 图层id，不给则给一个随机的id |
|
opacity |
Number | 1 | 图层透明度，0到1之间的值，0为完全透明，1为不透明，参考示例：[设置图层透明度] |
visible |
Boolean | true | 图层显示或隐藏，true则显示，false则隐藏，参考示例：[设置图层显示或隐藏] |
spatialReference |
SpatialReference | 图层坐标系，支持4326(包含4490，4214以及4610)、3857以及EPSG上的自定义坐标系，坐标系默认从元信息中获取，也可指定坐标系， 参考示例：[指定图层的坐标系示例] |
|
imageWidth |
Number | 256 | 图片宽度，单位px，参考示例：[设置图片大小] |
imageHeight |
Number | 256 | 图片高度，单位px，参考示例：[设置图片大小] |
minScale |
Number | 0 | 最小缩放级数，仅会请求级数大于等于minScale的图片 |
maxScale |
Number | 19 | 最大缩放级数，仅会请求级数小于等于maxScale的图片 |
tokenKey |
String | 'token' | token名 |
tokenValue |
String | token值，只有当tokenValue存在时，才会绑定token |
|
imageTransparency |
Boolean | true | 图片中没有数据的地方是否透明，默认为true，即透明 |
支持如下方法：
[1、加载图层资源][2、根据子图层id查询子图层]
[3、刷新图层]
[4、根据范围和大小获取image标签]
[5、创建一个该服务的子图层克隆对象]
[6、根据参数获取图片的url]
[7、更新子图层]
[8、通过传入的json构造并返回一个新的几何对象]
9、导出为json对象10、克隆几何对象
示例
// 初始化图层管理容器
// ES5引入方式
const { Map,MapView } = Zondy
const { ArcGISMapImageLayer } = Zondy.Layer
// ES6引入方式
import { Map,MapView,ArcGISMapImageLayer } from "@mapgis/webclient-common"
const map = new Map();
// 初始化地图视图对象
const mapView = new MapView({
// 视图id
viewId: "viewer-id",
// 图层管理容器
map: map
});
// 添加图层
const arcGISMapImageLayer = new ArcGISMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer'
});
map.add(arcGISMapImageLayer);// ES5引入方式
const { ArcGISMapImageLayer } = Zondy.Layer
const { SpatialReference } = Zondy
// ES6引入方式
import { ArcGISMapImageLayer,SpatialReference } from "@mapgis/webclient-common"
// 添加图层
const arcGISMapImageLayer = new ArcGISMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer',
// 自定义坐标新
spatialReference: new SpatialReference({
// 指定的wkid号，可在https://epsg.io/网站查询
wkid: '指定的wkid号'
})
});
map.add(arcGISMapImageLayer);// ES5引入方式
const { Map,MapView } = Zondy
const { ArcGISMapImageLayer } = Zondy.Layer
// ES6引入方式
import { Map,MapView,ArcGISMapImageLayer } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const mapView = new MapView({
// 视图id
viewId: "viewer-id",
// 图层管理容器
map: map
});
// 添加图层
const arcGISMapImageLayer = new ArcGISMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer',
// 瓦片宽度
imageWidth: 512,
// 瓦片高度
imageHeight: 512
});
map.add(arcGISMapImageLayer);// ES5引入方式
const { ArcGISMapImageLayer } = Zondy.Layer
// ES6引入方式
import { ArcGISMapImageLayer } from "@mapgis/webclient-common"
// 初始化时设置
const arcGISMapImageLayer = new ArcGISMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer',
// 设置透明度
opacity: 1.0
});
map.add(arcGISMapImageLayer);
// 加载完成后设置
arcGISMapImageLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 视点跳转
ArcGISMapImageLayer.opacity = 0.5
}) // ES5引入方式
const { ArcGISMapImageLayer } = Zondy.Layer
// ES6引入方式
import { ArcGISMapImageLayer } from "@mapgis/webclient-common"
// 初始化时设置
const arcGISMapImageLayer = new ArcGISMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer',
// 显示或隐藏图层
visible: true
});
map.add(arcGISMapImageLayer);
// 加载完成后设置
arcGISMapImageLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 显示或隐藏图层
arcGISMapImageLayer.visible = !ArcGISMapImageLayer.visible
})map.remove(arcGISMapImageLayer)// 加载完毕后，更改图层顺序
map.reorder(arcGISMapImageLayer, '要移动到的index');继承关系
成员变量
# readonly url
服务基地址
- Inherited From:
查看源代码 common/document/layer/baseLayer/MapImageLayer.js, line 26
方法
# static fromJSON(jsonopt)
参数:
| 名称 | 类型 | 描述 |
|---|---|---|
json |
Object | JSON对象 |
示例
// ES5引入方式
const { ArcGISMapImageLayer } = Zondy.Layer
// ES6引入方式
import { ArcGISMapImageLayer } from "@mapgis/webclient-common"
const json = {
// 服务基地址
url: 'http://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer',
}
const arcGISMapImageLayer = new ArcGISMapImageLayer.fromJSON(json)# createServiceSublayers()
服务上的子图层对象
# fetchImage(extent, widthopt, heightopt)
根据范围和大小获取image标签
参数:
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
extent |
Extent | ||
width |
Number | 256 | 图片宽度，单位px |
height |
Number | 256 | 图片高度，单位px |
示例
// ES5引入方式
const { Extent } = Zondy.Geometry
// ES6引入方式
import { Extent } from "@mapgis/webclient-common"
arcGISMapImageLayer.fetchImage({
// 你的范围
extent: new Extent(),
// 图片宽度
width: 256,
// 图片高度
height: 256
}).then((image) => {
// 这里返回一个html的image标签
})# getImageUrl(options)
根据参数获取图片的url
参数:
| 名称 | 类型 | 描述 |
|---|---|---|
options |
||
extent |
Extent | 图片范围 |
width |
Number | 图片宽度 |
height |
Number | 图片高度 |
String 图片的url
示例
// ES5引入方式
const { Extent } = Zondy.Geometry
// ES6引入方式
import { Extent } from "@mapgis/webclient-common"
const url = arcGISMapImageLayer.getImageUrl({
// 你的范围
extent: new Extent(),
// 图片宽度
width: 256,
// 图片高度
height: 256
})# load()
加载图层资源
示例
// ES5引入方式
const { ArcGISMapImageLayer } = Zondy.Layer
// ES6引入方式
import { ArcGISMapImageLayer } from "@mapgis/webclient-common"
// 初始化图层
const arcGISMapImageLayer = new ArcGISMapImageLayer({
// 服务基地址
url: 'http://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer',
});
arcGISMapImageLayer.load().then((result) => {
// 获取完图层信息
console.log(result)
})# setSubLayer(ArcGISMapImageSubLayer)
参数:
| 名称 | 类型 | 描述 |
|---|---|---|
ArcGISMapImageSubLayer |
ArcGISMapImageSubLayer | 要更新的子图层 |
# toJSON()
转换为json对象
- Inherited From:
查看源代码 common/document/layer/baseLayer/MapImageLayer.js, line 113
json对象
