类名 ArcGISMapImageLayer

# 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

服务基地址,
https://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer,参考示例:[ArcGIS的地图图片图层示例]
删除图层方法:[删除图层]

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

最小显示比例尺,图层在视图中可见的最小比例尺。

maxScale Number 0

最大显示比例尺,图层在视图中可见的最大比例尺。

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、克隆几何对象

示例

ArcGIS的地图图片图层示例

// 初始化图层管理容器
// 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'
});

指定图层的坐标系示例

// 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号'
  })
});

地图图层示例 - 设置图片大小

// 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',
  // 瓦片宽度
  imageWidth: 512,
  // 瓦片高度
  imageHeight: 512
});

设置图层透明度

// 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
});

// 加载完成后设置
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
});

// 加载完成后设置
arcGISMapImageLayer.on('layerview-created', function (result) {
  console.log("加载完毕:", result.layer)
  // 显示或隐藏图层
  arcGISMapImageLayer.visible = !ArcGISMapImageLayer.visible
})

删除图层

map.remove(arcGISMapImageLayer)

图层顺序

// 加载完毕后,更改图层顺序
map.reorder(arcGISMapImageLayer, '要移动到的index');

继承关系

成员变量

成员变量概述

名称 类型 描述
allSublayers Collection

所有子图层信息

capabilities String

可提供的服务

description String

图层描述信息

documentInfo String

地图文档信息

dynamicProjectionEnabled Boolean

是否开启动态投影

extent String

图层范围,从服务中读取,仅会请求在该范围内的瓦片

imageFormat String

图片格式

imageHeight Number

瓦片化显示时,瓦片高度

imageTransparency Boolean

图片中没有数据的地方是否透明

imageWidth Number

瓦片化显示时,瓦片宽度

mapName String

地图名称

renderMode String

渲染模式,分为瓦片渲染'tile'和图像渲染'image'

spatialReference SpatialReference

图层坐标系对象

sublayers Array

子图层对象

type String

图层类型

url String

服务基地址

成员变量详情

Collection

# allSublayers

所有子图层信息

Overrides:
String

# readonly capabilities

可提供的服务

Overrides:
String

# readonly description

图层描述信息

String

# readonly documentInfo

地图文档信息

Overrides:
Boolean

# dynamicProjectionEnabled

是否开启动态投影

Overrides:
String

# readonly extent

图层范围,从服务中读取,仅会请求在该范围内的瓦片

Overrides:
String

# imageFormat

图片格式

Overrides:
Number

# imageHeight

瓦片化显示时,瓦片高度

Overrides:
Boolean

# imageTransparency

图片中没有数据的地方是否透明

Overrides:
Number

# imageWidth

瓦片化显示时,瓦片宽度

Overrides:
String

# readonly mapName

地图名称

Overrides:
String

# renderMode

渲染模式,分为瓦片渲染'tile'和图像渲染'image'

Overrides:
SpatialReference

# spatialReference

图层坐标系对象

Inherited From:
Array

# sublayers

子图层对象

Overrides:
String

# readonly type

图层类型

String

# readonly url

服务基地址

Overrides:

方法

方法概述

名称 返回值类型 描述
fromJSON ArcGISMapImageLayer

通过传入的json构造并返回一个新的几何对象

clone FeatureLayer

克隆方法

createServiceSublayers Array

创建一个该服务的子图层克隆对象,注意不是本地的子图层对象

fetchImage Promise

根据范围和大小获取image标签

findSublayerById Object

根据子图层id查询子图层

getImageUrl String

根据参数获取图片的url

refresh

刷新图层

setSubLayer

更新子图层

toJSON Object

转换为json对象

方法详情

# static fromJSON(jsonopt)

通过传入的json构造并返回一个新的几何对象

参数

名称 类型 描述
json Object

JSON对象

新的ArcGISMapImageLayer对象

示例

通过传入的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)

# clone()

克隆方法

Overrides:

图层

FeatureLayer

# createServiceSublayers()

创建一个该服务的子图层克隆对象,注意不是本地的子图层对象

服务上的子图层对象

Array

# fetchImage(extent, widthopt, heightopt)

根据范围和大小获取image标签

参数

名称 类型 默认值 描述
extent Extent

范围参数

width Number 256

图片宽度,单位px

height Number 256

图片高度,单位px

请求完毕后的回调

Promise
示例

根据范围和大小获取image标签

 // 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标签
})

# findSublayerById(id)

根据子图层id查询子图层

参数

名称 类型 描述
id String

子图层id

子图层信息

Object

# getImageUrl(options)

根据参数获取图片的url

参数

名称 类型 描述
options
extent Extent

图片范围

width Number

图片宽度

height Number

图片高度

图片的url

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
})

# refresh()

刷新图层

# setSubLayer(ArcGISMapImageSubLayer)

更新子图层

参数

名称 类型 描述
ArcGISMapImageSubLayer ArcGISMapImageSubLayer

要更新的子图层

# toJSON()

转换为json对象

Overrides:

json对象

Object