Class: WebTileLayer

WebTileLayer

new WebTileLayer(options)

document/layer/WebTileLayer.js, line 10

网络瓦片图层，
支持加载任意网络地图服务，
服务的格式必须为：
http://{任意字符串}{x}{任意字符串}{y}{任意字符串}{z}
以天地图的DataServer服务为例，其服务地址必须是如下形式：
http://t5.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}
会将基地址中的{x}替换为列号，{y}替换为行号，{z}替换为级数
需要注意：
1、默认是标准的经纬度裁图坐标系(4326)，默认支持的坐标系有地理坐标系和Web墨卡托坐标系
2、如果是上述坐标系，但是坐标系的分辨率有所改变，因此不是标准的地理坐标系和Web墨卡托坐标系；或者不是上述坐标系，请自行构造TileInfo、Extent、SpatialReference等参数，来创建图层


[ES5引入方式]：
zondy.layer.WebTileLayer()
[ES6引入方式]：
import { WebTileLayer } from "@mapgis/webclient-common"

针对图层的操作请在图层加载完毕事件中进行
Layer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
});
如果不想在该事件中放入业务代码，则请确认图层资源已加载完毕后再进行操作
if(layer.loadStatus === 'loaded') {
// 你的业务逻辑
}

Name Type Description
options Object

构造参数

Name Type Default Description
url String 可选

服务基地址，格式为：
http://{任意字符串}{x}{任意字符串}{y}{任意字符串}{z}
会将{x}替换为列号，将{y}替换为行行号，将{z}替换为级数
id String 可选

图层id，不给则给一个随机的id
opacity Number 1 可选

图层透明度，0到1之间的值，0为完全透明，1为不透明，参考示例：[设置图层透明度]
visible Boolean true 可选

图层显示或隐藏，true则显示，false则隐藏，参考示例：[设置图层显示或隐藏]
spatialReference SpatialReference new SpatialReference({wkid:4326}) 可选

图层坐标系，默认为4326坐标系，也可自行指定坐标系
extent Extent 可选

图层范围，当坐标系为地理坐标系或者Web墨卡托坐标系时，地图范围默认为全球范围，也可自行指定范围
tileInfo TileInfo 可选

瓦片信息，当坐标系为地理坐标系或者Web墨卡托坐标系时，默认会自动计算瓦片信息，也可自行计算并设置瓦片信息
minScale Number 0 可选

最小显示比例尺，图层在视图中可见的最小比例尺。
maxScale Number 0 可选

最大显示比例尺，图层在视图中可见的最大比例尺。
tileSliceType TileSliceType 'wmts' 可选

瓦片的切片方式。支持TMS和WMTS两种切片方式的瓦片加载，默认为wmts切片方式。关于tms裁图可以参考[https://en.wikipedia.org/wiki/Tile_Map_Service]
subDomains Array.<String> [] 可选

子域名占位符,用于加快瓦片索引的速度。如果指定此值，则URL内必须包含{s}作为替换的模板
tokenKey String 'token' 可选

token名
tokenValue String 可选

token值，只有当tokenValue存在时，才会绑定token
clippingArea Polygon | Extent | Circle | MultiPolygon | null null 可选

图层空间裁剪范围，仅支持多多边形裁剪、多边形裁剪、矩形裁剪、圆形裁剪
Fires
  • Layer#event:图层加载完毕事件
  • Layer#event:图层销毁完毕事件
  • Layer#event:图层更新完毕事件
  • Layer#event:图层显隐更新完毕事件
  • Layer#event:图层透明度更新完毕事件
  • Layer#event:图层顺序更新完毕事件
  • Layer#event:图层刷新完毕事件
Examples

加载天地图的DataServer服务

// ES5引入方式
const { SpatialReference } = zondy
const { WebTileLayer} = zondy.layer

// ES6引入方式
import { WebTileLayer, SpatialReference } from "@mapgis/webclient-common"
const webTileLayer = new WebTileLayer({
  // 服务基地址
  url: 'http://t5.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}',
  // 设置坐标系
  spatialReference: new SpatialReference({wkid: 3857})
});

设置图层透明度

// ES5引入方式
const { WebTileLayer} = zondy.layer

// ES6引入方式
import { WebTileLayer } from "@mapgis/webclient-common"
// 初始化时设置
const webTileLayer = new WebTileLayer({
  // 服务基地址
  url: 'http://{任意字符串}{x}{任意字符串}{y}{任意字符串}{z}',
  // 设置图层透明度
  opacity: 1.0
});

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

设置图层显示或隐藏

* // ES5引入方式
const { WebTileLayer} = zondy.layer

// ES6引入方式
import { WebTileLayer } from "@mapgis/webclient-common"
// 初始化时设置
const webTileLayer = new WebTileLayer({
  // 服务基地址
  url: 'http://{任意字符串}{x}{任意字符串}{y}{任意字符串}{z}',
  // 设置图层显示或隐藏
  visible: true
});

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

删除图层

map.remove(webTileLayer)

图层顺序

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

Extends

Members

clippingAreaPolygon Extent Circle MultiPolygon null

空间裁剪范围

elevationInfoElevationInfo

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

subDomainsArray.<String>

子域名占位符,用于加快瓦片索引的速度。如果指定此值，则URL内必须包含{s}作为替换的模板

tileDisplayStrategyTileDisplayStrategy

瓦片显示策略，当瓦片图层的显示比例尺范围，超出瓦片数据自身的级别后的显示策略

tileInfoTileInfo

瓦片信息，用来构造图层坐标系，如果是自定义坐标系，请自行创建瓦片信息，否则无法创建图层

tileSizeNumber

瓦片大小。 当使用自定义坐标系时，需在 TileInfo 中明确提供瓦片大小，否则无法正确创建图层。

tileSliceTypeTileSliceType

瓦片的切片方式。支持TMS和WMTS两种切片方式的瓦片加载，默认为wmts切片方式。关于tms裁图可以参考[https://en.wikipedia.org/wiki/Tile_Map_Service]

titleString

图层名称

typeLayerType

图层类型

urlString

服务基地址

Methods

clone(){WebTileLayer}

document/layer/WebTileLayer.js, line 424

克隆当前网络瓦片图层。

会基于当前实例的序列化结果创建一个新的 WebTileLayer 实例，适用于复制相同的网络瓦片配置。

Returns:
Type Description
WebTileLayer 克隆后的网络瓦片图层实例。

toJSON(){Object}

document/layer/WebTileLayer.js, line 391

导出为 JSON 配置。

返回结果包含网络瓦片图层的服务地址、子域名、切片方式、瓦片大小和客户端裁剪范围等信息。

Returns:
Type Description
Object 图层配置对象。

WebTileLayer.fromJSON(json){WebTileLayer}

document/layer/WebTileLayer.js, line 408

通过 JSON 配置创建一个网络瓦片图层实例。

适用于从持久化配置恢复图层对象；返回实例会被直接标记为已加载状态。

Name Type Description
json Object 可选

JSON 配置对象。
Returns:
Type Description
WebTileLayer 新的网络瓦片图层实例。