MapGIS Client for JavaScript API

new ArcGISMapImageLayer(options)

document/layer/arcgis/ArcGISMapImageLayer.js, line 11

ArcGIS 地图图片图层。

用于接入 ArcGIS MapServer 服务并按当前视图范围请求出图结果，适用于动态地图渲染场景。图层会优先从服务元信息读取坐标系，支持在加载完成后进行子图层管理、刷新和出图参数控制。

Name Type Default Description

options

Object

{}

可选

构造参数

Name	Type	Description
`url`	String	可选服务基地址， IGS发布的ArcGIS服务: http://{ip}:{port}/igs/rest/services/{folder}/{serviceName}/arcgis/MapServer ArcGIS: https://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer 参考示例：[ArcGIS的地图图片图层示例] 删除图层方法：[删除图层]

Fires

Layer#event:图层加载完毕事件
Layer#event:图层销毁完毕事件
Layer#event:图层更新完毕事件

Examples

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');

Extends

MapImageLayer

Members

allSublayersCollection

所有子图层对象信息

clippingAreaPolygon Extent Circle MultiPolygon null

空间裁剪范围。

仅用于客户端侧裁剪（是否支持由具体引擎实现决定）。

descriptionString

图层描述信息

documentInfoObject

地图文档信息

dynamicProjectionEnabledBoolean

是否开启动态投影

elevationInfoElevationInfo

高程模式参数。仅支持 ElevationMode.onTheScene 和 ElevationMode.onTheGround 两种模式。

imageFormatString

图片格式

imageFormatsArray.<String>

图片格式数组，表示服务支持的所有图片格式

imageHeightNumber

瓦片化显示时，瓦片高度

imageTransparencyBoolean

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

imageWidthNumber

瓦片化显示时，瓦片宽度

mapNameString

地图名称

renderModeString

渲染模式。

tile：瓦片渲染
image：整屏出图渲染

sublayersCollection null Object

所有子图层对象信息

typeString

图层类型

urlString

服务基地址

versionString

服务的版本

Methods

_createSublayerOptions(serverSublayerInfo, clientSublayerInfo, options){*} document/layer/arcgis/ArcGISMapImageLayer.js, line 474

创建子图层 sublayers

Name	Type	Description
`serverSublayerInfo`	*
`clientSublayerInfo`	*
`options`	*

Returns:

Type	Description
*

clone(){ArcGISMapImageLayer} document/layer/arcgis/ArcGISMapImageLayer.js, line 579

克隆方法

Returns:

Type	Description
ArcGISMapImageLayer	图层

fetchImage(extent, width, height){Promise} document/layer/arcgis/ArcGISMapImageLayer.js, line 408

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

Name	Type	Default	Description
`extent`	Extent		范围参数
`width`	Number	256	可选图片宽度，单位px
`height`	Number	256	可选图片高度，单位px

Returns:

Type	Description
Promise	请求完毕后的回调

Example

根据范围和大小获取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){Object} document/layer/arcgis/ArcGISMapImageLayer.js, line 375

根据子图层id查询子图层

Name	Type	Description
`id`	String	子图层id

Returns:

Type	Description
Object	子图层信息

getImageUrl(options){String} document/layer/arcgis/ArcGISMapImageLayer.js, line 540

根据参数获取图片的url

Name Type Description

options

Name	Type	Description
`extent`	Extent	可选图片范围
`width`	Number	可选图片宽度
`height`	Number	可选图片高度

Returns:

Type	Description
String	图片的url

Example

根据参数获取图片的url

 // ES5引入方式
const { Extent } = zondy.geometry

// ES6引入方式
import { Extent } from "@mapgis/webclient-common"
const url = arcGISMapImageLayer.getImageUrl({
  // 你的范围
  extent: new Extent(),
  // 图片宽度
  width: 256,
  // 图片高度
  height: 256
})

toJSON(){Object} document/layer/arcgis/ArcGISMapImageLayer.js, line 569

转换为 JSON 对象

Returns:

Type	Description
Object	JSON 对象

ArcGISMapImageLayer.fromJSON(json){ArcGISMapImageLayer} document/layer/arcgis/ArcGISMapImageLayer.js, line 560

通过传入的 JSON 构造并返回一个新的图层对象

Name	Type	Description
`json`	Object	可选 JSON 对象

Returns:

Type	Description
ArcGISMapImageLayer	新的ArcGISMapImageLayer对象

Example

通过传入的 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 = ArcGISMapImageLayer.fromJSON(json)

Class: ArcGISMapImageLayer

new ArcGISMapImageLayer(options)

Fires

Examples

Extends

Members

allSublayersCollection

clippingAreaPolygon Extent Circle MultiPolygon null

descriptionString

documentInfoObject

dynamicProjectionEnabledBoolean

elevationInfoElevationInfo

imageFormatString

imageFormatsArray.<String>

imageHeightNumber

imageTransparencyBoolean

imageWidthNumber

mapNameString

renderModeString

sublayersCollection null Object

typeString

urlString

versionString

Methods

_createSublayerOptions(serverSublayerInfo, clientSublayerInfo, options){*}

Returns:

clone(){ArcGISMapImageLayer}

Returns:

fetchImage(extent, width, height){Promise}

Returns:

Example

findSublayerById(id){Object}

Returns:

getImageUrl(options){String}

Returns:

Example

toJSON(){Object}

Returns:

ArcGISMapImageLayer.fromJSON(json){ArcGISMapImageLayer}

Returns:

Example