# new WebTileLayer(options)
网络瓦片图层,
支持加载任意网络地图服务,
服务的格式必须为:
http://{任意字符串}{col}{任意字符串}{row}{任意字符串}{level}
以天地图的DataServer服务为例,其服务地址必须是如下形式:
http://t5.tianditu.com/DataServer?T=vec_w&x={col}&y={row}&l={level}
会将基地址中的{col}替换为列号,{row}替换为行号,{level}替换为级数
需要注意:
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') {
// 你的业务逻辑
}
参数:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
options |
Object | 构造参数 |
|
url |
String | 服务基地址,格式为: |
|
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 | 图层空间裁剪范围,仅支持多多边形裁剪、多边形裁剪、矩形裁剪、圆形裁剪 |
支持如下方法:
[1、加载图层资源][2、根据级数以及行列号获取瓦片的url]
[3、将图层转为json对象]
[4、通过传入的json构造并返回一个新的几何对象]
5、导出为json对象
6、克隆几何对象
示例
// 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={col}&y={row}&l={level}',
// 设置坐标系
spatialReference: new SpatialReference({wkid: 3857})
});
// ES5引入方式
const { WebTileLayer} = zondy.layer
// ES6引入方式
import { WebTileLayer } from "@mapgis/webclient-common"
// 初始化时设置
const webTileLayer = new WebTileLayer({
// 服务基地址
url: 'http://{任意字符串}{col}{任意字符串}{row}{任意字符串}{level}',
// 设置图层透明度
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://{任意字符串}{col}{任意字符串}{row}{任意字符串}{level}',
// 设置图层显示或隐藏
visible: true
});
// 加载完成后设置
arcgisTileLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 设置图层显示或隐藏
webTileLayer.visible = !webTileLayer.visible
})
map.remove(webTileLayer)
// 加载完毕后,更改图层顺序
map.reorder(webTileLayer, '要移动到的index');
继承关系
成员变量
# extent
图层范围,仅显示范围中的内容,当坐标系是地理坐标系或者Web墨卡托坐标系是,会指定图层范围,若使用自定义坐标系,请自行指定图层范围,否则无法创建图层
- Overrides:
# maxScale
最大显示比例尺,图层在视图中可见的最大比例尺(最放大)。如果地图被放大到超过这个比例,图层将不可见。默认值为0,0表示图层没有最大比例尺、可见性不受最大比例尺限制。maxScale应该始终小于minScale。
- Inherited From:
- Default Value:
- 0
# minScale
最小显示比例尺,图层在视图中可见的最小比例尺(最缩小)。如果地图被缩小到超过这个比例,图层将不可见。默认值为0,0表示图层没有最小比例尺、可见性不受最小比例尺限制。minScale应该始终大于maxScale。
- Inherited From:
- Default Value:
- 0
# opacity
图层透明度,0到1之间的值,0为完全透明,1为不透明,会触发图层更新完毕事件。IGSSceneLayer图层类型为地形时,不支持该属性。
- Inherited From:
# tileSliceType
瓦片的切片方式。支持TMS和WMTS两种切片方式的瓦片加载,默认为wmts切片方式。关于tms裁图可以参考[https://en.wikipedia.org/wiki/Tile_Map_Service]
方法
# off(typesopt, fnopt, contextopt)
移除事件
示例如下:
[1、移除一个事件的指定回调函数]
[2、移除一个事件的所有回调函数]
[3、移除多个事件的同一个指定的回调函数]
[4、移除多个指定事件的回调函数]
[5、删除时指定上下文 - types类型为字符串]
[6、删除时指定上下文 - types类型为对象]
参数:
名称 | 类型 | 描述 |
---|---|---|
types |
string | 移除指定事件类型上绑定的回调函数 |
fn |
function | 事件回调函数,当types为字符串,且不指定要删除的回调函数时,删除该事件上的所有回调函数 |
context |
Object | 事件回调函数的this关键字将指向的对象 |
- Inherited From:
当前实例
示例
移除一个事件的指定回调函数
// 一个事件的回调函数
const clickFunction = function (event) {
console.log("点击事件:", event)
}
// 调用MapView或SceneView的off方法移除一个事件的回调函数
view.off('click', clickFunction)
移除一个事件的所有回调函数
// 一个事件的回调函数1
const clickFunction1 = function (event) {
console.log("点击事件1:", event)
}
// 一个事件的回调函数2
const clickFunction2 = function (event) {
console.log("点击事件2:", event)
}
// 调用MapView或SceneView的off方法移除一个事件的所有回调函数
// 不指定回调函数,则移除该事件上的所有绑定的回调函数
view.off('click')
移除多个事件的同一个指定的回调函数
// 多个事件的同一个回调函数
const eventFunction = function (event) {
console.log("事件:", event)
}
// 调用MapView或SceneView的off方法移除多个事件的同一个指定的回调函数
view.off('click double-click', eventFunction)
移除多个指定事件的回调函数
// 一个事件的回调函数
const clickFunction = function (event) {
console.log("click事件:", event)
}
// 调用MapView或SceneView的off方法移除多个指定事件的回调函数
view.off({
// 移除click事件上一个指定的函数
"click": clickFunction,
// 移除double-click上所有指定的函数
"double-click": undefined
})
删除时指定上下文 - types类型为字符串
// 一个事件的回调函数
const clickFunction = function (event) {
console.log("点击事件:", event)
}
// 调用MapView或SceneView的off方法移除一个事件的回调函数
view.off('click', clickFunction, view)
// 调用MapView或SceneView的off方法移除一个事件的所有回调函数
view.off('click', undefined, view)
删除时指定上下文 - types类型为对象
// 一个事件的回调函数
const clickFunction = function (event) {
console.log("click事件:", event)
}
// 调用MapView或SceneView的off方法移除多个指定事件的回调函数
view.off({
// 移除click事件上一个指定的函数
"click": clickFunction,
// 移除double-click上所有指定的函数
"double-click": undefined
}, view)
# on(typesopt, fnopt, contextopt)
注册一个新的监听事件;
示例如下:
[1、注册一个事件]
[2、一次注册多个事件 - 同一个回调函数]
[3、一次注册多个事件 - 分别指回调应函数]
[4、当types为字符串时 - 指定上下文]
[5、当types为对象时 - 指定上下文]
参数:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
types |
String | Object | null | 事件类型 |
fn |
function | null | 事件回调函数 |
context |
Object | null | 事件回调函数的this关键字将指向的对象 |
- Inherited From:
当前实例
示例
注册一个事件
// 初始化一个点击事件回调函数
const clickFunction = function (event) {
console.log("点击事件:", event)
}
// 调用MapView或SceneView的on方法注册一个点击事件
view.on('click', clickFunction)
一次注册多个事件 - 同一个回调函数
// 初始化一个事件回调函数
const eventFunction = function (event) {
console.log("事件:", event)
}
// 调用MapView或SceneView的on方法注册多个事件
// 多个事件类型使用同一个回调函数
view.on('click right-click-down', eventFunction)
一次注册多个事件 - 分别指回调应函数
// 初始化一个左键点击事件回调函数
const clickFunction = function (event) {
console.log("click事件:", event)
}
// 初始化一个右键按下事件回调函数
const rightClickFunction = function (event) {
console.log("right-click-down事件:", event)
}
// 调用MapView或SceneView的on方法注册多个事件
// 每一个事件类型,使用单独的回调函数
// 注意使用此种方式,一种类型的事件仅能指定一个回调函数
view.on({
"click": clickFunction,
"right-click-down": rightClickFunction
})
指定上下文 - types类型为字符串
// 初始化一个点击事件回调函数
const clickFunction = function (event) {
console.log("点击事件:", event)
console.log("上下文对象:", this)
}
// 调用MapView或SceneView的on方法注册一个点击事件
// 指定view为回调函数的上下文对象
view.on('click', clickFunction, view)
指定上下文 - types类型为对象
// 初始化一个点击事件回调函数
const clickFunction = function (event) {
console.log("点击事件:", event)
console.log("上下文对象:", this)
}
// 调用MapView或SceneView的on方法注册一个点击事件
// 指定view为回调函数的上下文对象
view.on({
"click": clickFunction,
"right-click-down": clickFunction
}, view)
事件
# 图层刷新完毕事件
图层刷新完毕事件,请注意该事件是图层更新事件(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);
}
}
});