import { TileLayer } from '../baseLayer'
import { Zondy } from '../../../base'
import { defaultValue, Log } from '../../../util'
import { LayerType, LoadStatus } from '../../../base/enum'
import { TileServer } from '../../../service'
import { Extent, Point, SpatialReference } from '../../../base/geometry'
import TileInfoUtil from '../support/TileInfoUtil'
/**
* ArcGIS瓦片图层，<br>
* 目前二维上支持4326(包括4490，4214以及4610)，3857以及EPSG支持的自定义坐标系，三维上仅支持4326(包括4490，4214以及4610)以及3857坐标系，会自动读取元信息上的坐标系，不需要用户指定，
* <br><br>[ES5引入方式]：<br/>
* Zondy.Layer.ArcGISTileLayer() <br/>
* [ES6引入方式]：<br/>
* import { ArcGISTileLayer } from "@mapgis/webclient-common" <br/>
* <br/>
* 针对图层的操作请在图层加载完毕事件中进行<br/>
* Layer.on('layerview-created', function (result) {<br/>
* console.log("加载完毕:", result.layer)<br/>
* });<br/>
* 如果不想在该事件中放入业务代码，则请确认图层资源已加载完毕后再进行操作<br/>
* if(layer.loadStatus === 'loaded') {<br/>
* // 你的业务逻辑<br/>
* }
* @class ArcGISTileLayer
* @moduleEX LayerModule
* @extends Layer
* @fires Layer#图层加载完毕事件
* @fires Layer#图层销毁完毕事件
* @fires Layer#图层更新完毕事件
* @param {Object} options 构造参数
* @param {String} [options.url] 服务基地址：https://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer，<br/>
* 参考示例：<a href='#ArcGISTileLayer'>[ArcGIS的瓦片图层示例]</a><br/>
* 删除图层方法：<a href='#remove-layer'>[删除图层]</a>
* @param {String} [options.id] 图层id，不给则给一个随机的id
* @param {Number} [options.opacity = 1] 图层透明度，0到1之间的值，0为完全透明，1为不透明，参考示例：<a href='#opacity'>[设置图层透明度]</a>
* @param {Boolean} [options.visible = true] 图层显示或隐藏，true则显示，false则隐藏，参考示例：<a href='#visible'>[设置图层显示或隐藏]</a>
* @param {SpatialReference} [options.spatialReference] 图层坐标系，默认从服务元信息上读取
* @param {Number} [options.minScale = 0] 最小缩放级数，仅会请求级数大于等于minScale的图片
* @param {Number} [options.maxScale = 19] 最大缩放级数，仅会请求级数小于等于maxScale的图片
* @param {String} [options.tokenKey = 'token'] token名
* @param {String} [options.tokenValue] token值，只有当tokenValue存在时，才会绑定token
*
* @summary <h5>支持如下方法：</h5>
* <a href='#load'>[1、加载图层资源]</a><br/>
* <a href='#getTileUrl'>[2、根据级数以及行列号获取瓦片的url]</a><br/>
* <a href='#toJSON'>[3、将图层转为json对象]</a><br/>
* <a href='#fromJSON'>[4、通过传入的json构造并返回一个新的几何对象]</a><br/>
* [5、导出为json对象]{@link OGCLayer#toJSON}<br/>
* [6、克隆几何对象]{@link OGCLayer#clone}
*
* @example <caption><h7 id='ArcGISTileLayer'>ArcGIS的瓦片图层示例</h7></caption>
* // ES5引入方式
* const { ArcGISTileLayer } = Zondy.Layer
* // ES6引入方式
* import { ArcGISTileLayer } from "@mapgis/webclient-common"
* // 初始化图层管理容器
* const map = new Zondy.Map();
* // 初始化地图视图对象
* const mapView = new Zondy.MapView({
* // 视图id
* viewId: "viewer-id",
* // 图层管理容器
* map: map
* });
* const arcgisTileLayer = new ArcGISTileLayer({
* // 服务基地址
* url: 'http://{ip}:{port}/arcgis/rest/services/Tile/{serviceName}/MapServer'
* });
* map.add(arcgisTileLayer);
*
* @example <caption><h7 id='opacity'>设置图层透明度</h7></caption>
* // 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
* });
* map.add(arcgisTileLayer);
* // 加载完成后设置
* arcgisTileLayer.on('layerview-created', function (result) {
* console.log("加载完毕:", result.layer)
* arcgisTileLayer.opacity = 0.5
* })
*
* @example <caption><h7 id='visible'>设置图层显示或隐藏</h7></caption>
* // 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
* });
* map.add(arcgisTileLayer);
* // 加载完成后设置
* arcgisTileLayer.on('layerview-created', function (result) {
* console.log("加载完毕:", result.layer)
* // 设置图层显示或隐藏
* arcgisTileLayer.visible = !arcgisTileLayer.visible
* })
*
* @example <caption><h7 id='remove-layer'>删除图层</h7></caption>
* map.remove(arcgisTileLayer)
*
* @example <caption><h7 id='index'>图层顺序</h7></caption>
* // 加载完毕后，更改图层顺序
* map.reorder(arcgisTileLayer, '要移动到的index');
* */
class ArcGISTileLayer extends TileLayer {
constructor(options) {
super(options)
options = defaultValue(options, {})
this.type = LayerType.arcgisTile
this.description = 'ArcGIS瓦片图层'
/**
* 服务基地址
* @member {String} ArcGISTileLayer.prototype.url
*/
this.url = defaultValue(options.url, '')
/**
* 服务名称
* @member {String} ArcGISTileLayer.prototype.mapName
*/
this.mapName = defaultValue(options.mapName, '')
// 瓦片服务
this._tileServer = new TileServer({
url: this.url
})
}
/**
* 加载图层资源
* @example <caption><h7 id='load'>不加载图层，仅获取图层信息</h7></caption>
* // 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'
* });
* arcgisTileLayer.load().then((result) => {
* // 获取完图层信息
* console.log(result)
* })
* */
load() {
const self = this
return this._tileServer
.queryServerInfo()
.then((result) => {
Log.info('TileServer信息查询成功:', result)
const data = result.data
// 获取图层名称
self.mapName = data.mapName
// 获取图层范围
self.extent = new Extent({
xmin: data.fullExtent.xmin,
ymin: data.fullExtent.ymin,
xmax: data.fullExtent.xmax,
ymax: data.fullExtent.ymax
})
// 获取瓦片大小
self.tileSize = data.tileInfo.cols
// 获取图层信息
self.tileInfo = TileInfoUtil.parseArcgisTileInfo(data.tileInfo)
// 设置坐标系
self.spatialReference = new SpatialReference(
self.tileInfo.spatialReference
)
return new Promise((resolve) => {
self.loadStatus = LoadStatus.loaded
self.loaded = true
resolve(self)
})
})
.catch((result) => {
Log.error('TileServer信息查询失败:', result)
})
}
/**
* 根据级数以及行列号获取瓦片的url
* @param {Number} level 瓦片级数
* @param {Number} row 行号
* @param {Number} col 列号
* @example <caption><h7 id='getTileUrl'>根据级数以及行列号获取瓦片的url</h7></caption>
* const url = arcgisTileLayer.getTileUrl(0, 1, 2)
* */
getTileUrl(level, row, col) {
return `${this.url}/tileImage/${level}/${row}/${col}?f=image`
}
/**
* 通过传入的json构造并返回一个新的几何对象<a id='fromJSON'></a>
* @param {Object} [json] JSON对象
* @example <caption><h7>通过传入的json构造并返回一个新的几何对象</h7></caption>
* // 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)
*/
static fromJSON(json) {
json = defaultValue(json, {})
return new ArcGISTileLayer(json)
}
}
Zondy.Layer.ArcGISTileLayer = ArcGISTileLayer
export default ArcGISTileLayer
