类名 ArcGISTileLayer

# new ArcGISTileLayer(options)

ArcGIS瓦片图层,
目前二维上支持4326(包括4490,4214以及4610),3857以及EPSG支持的自定义坐标系,三维上仅支持4326(包括4490,4214以及4610)以及3857坐标系,会自动读取元信息上的坐标系,不需要用户指定,

[ES5引入方式]:
zondy.layer.ArcGISTileLayer()
[ES6引入方式]:
import { ArcGISTileLayer } 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

图层坐标系,默认从服务元信息上读取

minScale Number 0

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

maxScale Number 0

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

tokenKey String 'token'

token名

tokenValue String

token值,只有当tokenValue存在时,才会绑定token

支持如下方法:
[1、加载图层资源]
[2、根据级数以及行列号获取瓦片的url]
[3、将图层转为json对象]
[4、通过传入的json构造并返回一个新的几何对象]
5、导出为json对象
6、克隆几何对象

示例

ArcGIS的瓦片图层示例

// ES5引入方式
const { ArcGISTileLayer } = zondy.layer
// ES6引入方式
import { ArcGISTileLayer } from "@mapgis/webclient-common"
const arcgisTileLayer = new ArcGISTileLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/arcgis/rest/services/Tile/{serviceName}/MapServer'
});

设置图层透明度

// ES5引入方式
const { ArcGISTileLayer } = zondy.layer
// ES6引入方式
import { ArcGISTileLayer } from "@mapgis/webclient-common"
// 初始化时设置
const arcgisTileLayer = new ArcGISTileLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/arcgis/rest/services/Tile/{serviceName}/MapServer',
  // 设置图层透明度
  opacity: 1.0
});

// 加载完成后设置
arcgisTileLayer.on('layerview-created', function (result) {
  console.log("加载完毕:", result.layer)
arcgisTileLayer.opacity = 0.5
})

设置图层显示或隐藏

// ES5引入方式
const { ArcGISTileLayer } = zondy.layer
// ES6引入方式
import { ArcGISTileLayer } from "@mapgis/webclient-common"
// 初始化时设置
const arcgisTileLayer = new ArcGISTileLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/arcgis/rest/services/Tile/{serviceName}/MapServer',
  // 设置图层显示或隐藏
  visible: true
});

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

删除图层

map.remove(arcgisTileLayer)

图层顺序

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

继承关系

成员变量

成员变量概述

名称 类型 描述
copyright String

版权所有

description String

图层描述

extendProps Object

当前图层对象上不支持的属性,二次开发用户希望挂在图层对像上的属性可以存储到该属性中

extensionOptions Object

初始化图层的额外参数,可以通过该参数传入引擎原生的构造参数

extent Extent

图层范围,从服务元信息中获取

headers String

设置服务请求头

httpMethod FetchMethod

http请求方式

id String

图层id

index Number

图层顺序

loaded Boolean

是否加载完毕

loadStatus String

图层加载状态

mapName String

服务名称

maxScale Number

最大显示比例尺,图层在视图中可见的最大比例尺(最放大)。如果地图被放大到超过这个比例,图层将不可见。默认值为0,0表示图层没有最大比例尺、可见性不受最大比例尺限制。maxScale应该始终小于minScale。

minScale Number

最小显示比例尺,图层在视图中可见的最小比例尺(最缩小)。如果地图被缩小到超过这个比例,图层将不可见。默认值为0,0表示图层没有最小比例尺、可见性不受最小比例尺限制。minScale应该始终大于maxScale。

opacity Number

图层透明度,0到1之间的值,0为完全透明,1为不透明,会触发图层更新完毕事件。IGSSceneLayer图层类型为地形时,不支持该属性。

spatialReference SpatialReference

图层坐标系对象

title String

图层名称

tokenAttachType String

token附加类型。默认psot请求优先附加到body,get请求优先附加到url末尾

tokenKey String

token名

tokenValue String

token值

type String

图层类型

url String

服务基地址

visible Number

图层显示或隐藏,true则显示,false则隐藏,会触发图层更新完毕事件

成员变量详情

String

版权所有

Inherited From:
String

# readonly description

图层描述

Overrides:
Object

# extendProps

当前图层对象上不支持的属性,二次开发用户希望挂在图层对像上的属性可以存储到该属性中

Inherited From:
Default Value:
  • {}
Object

# extensionOptions

初始化图层的额外参数,可以通过该参数传入引擎原生的构造参数

Inherited From:
Default Value:
  • {}
Extent

# readonly extent

图层范围,从服务元信息中获取

Overrides:
String

# headers

设置服务请求头

Inherited From:
FetchMethod

# httpMethod

http请求方式

Inherited From:
String

# readonly id

图层id

Inherited From:
Number

# index

图层顺序

Inherited From:
Boolean

# readonly loaded

是否加载完毕

Overrides:
Default Value:
  • false
String

# readonly loadStatus

图层加载状态

Overrides:
Default Value:
  • not-loaded
String

# mapName

服务名称

Number

# maxScale

最大显示比例尺,图层在视图中可见的最大比例尺(最放大)。如果地图被放大到超过这个比例,图层将不可见。默认值为0,0表示图层没有最大比例尺、可见性不受最大比例尺限制。maxScale应该始终小于minScale。

Inherited From:
Default Value:
  • 0
Number

# minScale

最小显示比例尺,图层在视图中可见的最小比例尺(最缩小)。如果地图被缩小到超过这个比例,图层将不可见。默认值为0,0表示图层没有最小比例尺、可见性不受最小比例尺限制。minScale应该始终大于maxScale。

Inherited From:
Default Value:
  • 0
Number

# opacity

图层透明度,0到1之间的值,0为完全透明,1为不透明,会触发图层更新完毕事件。IGSSceneLayer图层类型为地形时,不支持该属性。

Inherited From:
SpatialReference

# spatialReference

图层坐标系对象

Overrides:
String

# title

图层名称

Inherited From:
String

# tokenAttachType

token附加类型。默认psot请求优先附加到body,get请求优先附加到url末尾

Inherited From:
String

# tokenKey

token名

Inherited From:
Default Value:
  • token
String

# tokenValue

token值

Inherited From:
String

# readonly type

图层类型

Overrides:
String

# url

服务基地址

Number

# visible

图层显示或隐藏,true则显示,false则隐藏,会触发图层更新完毕事件

Inherited From:

方法

方法概述

名称 返回值类型 描述
fromJSON ArcGISTileLayer

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

clone Layer

克隆方法

destroy *
getTileUrl String

根据级数以及行列号获取瓦片的url

isLoaded Boolean

判断图层是否加载成功

refresh

刷新图层

toJSON Object

转换为json对象

方法详情

# static fromJSON(jsonopt)

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

参数

名称 类型 描述
json Object

JSON对象

新的ArcGISTileLayer对象

ArcGISTileLayer
示例

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

// ES5引入方式
const { ArcGISTileLayer } = zondy.layer
// ES6引入方式
import { ArcGISTileLayer } from "@mapgis/webclient-common"
const json = {
  // 服务基地址
  url: 'http://{ip}:{port}/arcgis/rest/services/Tile/{serviceName}/MapServer'
}
const arcgisTileLayer = new ArcGISTileLayer.fromJSON(json)

# clone()

克隆方法

Inherited From:

图层

Layer

# destroy()

Inherited From:
*

# getTileUrl(level, row, col)

根据级数以及行列号获取瓦片的url

参数

名称 类型 描述
level Number

瓦片级数

row Number

行号

col Number

列号

瓦片请求地址

String
示例

根据级数以及行列号获取瓦片的url

const url = arcgisTileLayer.getTileUrl(0, 1, 2)

# isLoaded()

判断图层是否加载成功

Inherited From:

图层是否加载成功

Boolean

# refresh()

刷新图层

Inherited From:

# toJSON()

转换为json对象

Inherited From:

json对象

Object

事件

事件概述

名称 描述
图层刷新完毕事件 图层刷新完毕事件
图层加载完毕事件 图层加载完毕事件
图层显隐更新完毕事件 图层显隐更新完毕事件
图层更新完毕事件 图层更新完毕事件
图层透明度更新完毕事件 图层透明度更新完毕事件
图层销毁完毕事件 图层销毁完毕事件
图层顺序更新完毕事件 图层顺序更新完毕事件

事件详情

# 图层刷新完毕事件

图层刷新完毕事件,请注意该事件是图层更新事件(layerview-update)的子事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type String <optional>
'layerview-update'

图层更新完毕事件

message String <optional>
null

更新描述

updateContent Array.<UpdateContent> <optional>
null

更新详情对象

layer Layer <optional>
null

地图图层对象

layerView MapView <optional>
null

图层的视图对象

sourceTarget Layer <optional>
null

事件发起对象

target Map <optional>
null

事件接收对象

Inherited From:
示例

图层刷新完毕事件

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 === 'refresh'){
      console.log("图层刷新完毕事件:", event);
    }
  }
});

# 图层加载完毕事件

图层加载完毕事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type String <optional>
'layerview-created'

图层加载完毕事件

message String <optional>
null

更新描述

UpdateContent Array.<UpdateContent> <optional>
null

更新详情对象

layer Layer <optional>
null

地图图层对象

layerView MapView <optional>
null

图层的视图对象

sourceTarget Layer <optional>
null

事件发起对象

target Map <optional>
null

事件接收对象

Inherited From:
示例

图层加载完毕事件

Layer.on('layerview-created', function (result) {
  console.log("加载完毕:", result.layer)
});

# 图层显隐更新完毕事件

图层显隐更新完毕事件,请注意该事件是图层更新事件(layerview-update)的子事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type String <optional>
'layerview-update'

图层更新完毕事件

message String <optional>
null

更新描述

updateContent Array.<UpdateContent> <optional>
null

更新详情对象

layer Layer <optional>
null

地图图层对象

layerView MapView <optional>
null

图层的视图对象

sourceTarget Layer <optional>
null

事件发起对象

target Map <optional>
null

事件接收对象

Inherited From:
示例

图层显隐更新完毕事件

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 === 'visible'){
      console.log("图层显隐更新事件:", event);
    }
  }
});

# 图层更新完毕事件

图层更新完毕事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type String <optional>
'layerview-update'

图层更新完毕事件

message String <optional>
null

更新描述

updateContent Array.<UpdateContent> <optional>
null

更新详情对象

layer Layer <optional>
null

地图图层对象

layerView MapView <optional>
null

图层的视图对象

sourceTarget Layer <optional>
null

事件发起对象

target Map <optional>
null

事件接收对象

Inherited From:
示例

图层更新完毕事件

Layer.on('layerview-update', function (result) {
  console.log("更新完毕:", result.layer)
});

# 图层透明度更新完毕事件

图层透明度更新完毕事件,请注意该事件是图层更新事件(layerview-update)的子事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type String <optional>
'layerview-update'

图层更新完毕事件

message String <optional>
null

更新描述

updateContent Array.<UpdateContent> <optional>
null

更新详情对象

layer Layer <optional>
null

地图图层对象

layerView MapView <optional>
null

图层的视图对象

sourceTarget Layer <optional>
null

事件发起对象

target Map <optional>
null

事件接收对象

Inherited From:
示例

图层透明度更新完毕事件

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 === 'opacity'){
      console.log("图层透明度更新事件:", event);
    }
  }
});

# 图层销毁完毕事件

图层销毁完毕事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type String <optional>
'layerview-remove'

图层销毁完毕事件

message String <optional>
null

更新描述

updateContent Array.<UpdateContent> <optional>
null

更新详情对象

layer Layer <optional>
null

要销毁的地图图层对象

layerView MapView <optional>
null

图层的视图对象

sourceTarget Layer <optional>
null

事件发起对象

target Map <optional>
null

事件接收对象

Inherited From:
示例

图层销毁完毕事件

Layer.on('layerview-remove', function (result) {
  console.log("销毁完毕:", result.layer)
});

# 图层顺序更新完毕事件

图层顺序更新完毕事件,请注意该事件是图层更新事件(layerview-update)的子事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type String <optional>
'layerview-update'

图层更新完毕事件

message String <optional>
null

更新描述

updateContent Array.<UpdateContent> <optional>
null

更新详情对象

layer Layer <optional>
null

地图图层对象

layerView MapView <optional>
null

图层的视图对象

sourceTarget Layer <optional>
null

事件发起对象

target Map <optional>
null

事件接收对象

Inherited From:
示例

图层顺序更新完毕事件

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 === 'index'){
      console.log("图层顺序更新完毕事件:", event);
    }
  }
});