csk-gis-frame-work 4.0.0

package/mapgis/js/datalayer/arcgis-layer/ArcGISMapImageLayer.js

@@ -0,0 +1,586 @@
+import DataUtils from '../../../../mapboxgl/js/utils/DataUtils';
+import mapConfig from '../../../../baseSetting/config/mapConfig'
+import {removeLayerFromManager} from "../";
+
+/**
+ * 定义 MapGIS Common API ArcGIS地图图片图层类
+ *
+ * @alias ArcGISMapImageLayer
+ *
+ * @summary <用于加载和管理ArcGIS MapServer服务图层，基于 MapGIS Client for JavaScript Common 模块>
+ * @description 该类负责具体的图层操作逻辑，包括图层的加载、显示/隐藏、移除等。
+ *              底层通过 LayerProvider 与 Mapbox GL JS 进行交互。
+ */
+export default class ArcGISMapImageLayer {
+    /**
+     * 构造函数
+     * @param {Object} options - 图层配置选项
+     * @param {Object} options.map - 地图对象（mapboxgl.Map 实例）
+     * @param {String} options.url - 服务基地址
+     * @param {String} [options.id] - 图层ID（可选，不传则自动生成）
+     * @param {Number} [options.opacity=1] - 图层透明度 (0-1)
+     * @param {Boolean} [options.visible=true] - 图层可见性
+     * @param {Object} [options.spatialReference] - 坐标系
+     * @param {Number} [options.imageWidth=256] - 瓦片宽度，单位px
+     * @param {Number} [options.imageHeight=256] - 瓦片高度，单位px
+     * @param {Number} [options.minScale=0] - 最小显示比例尺
+     * @param {Number} [options.maxScale=0] - 最大显示比例尺
+     * @param {Boolean} [options.imageTransparency=true] - 图片中没有数据的地方是否透明
+     * @param {String} [options.imageFormat='png'] - 图片格式
+     * @param {Boolean} [options.dynamicProjectionEnabled=false] - 是否开启动态投影
+     * @param {Object} [options.extent] - 图层范围
+     */
+    constructor(options) {
+        /**
+         * 地图对象
+         * @type {Object}
+         */
+        this._map = options.map;
+
+        /**
+         * 底层图层实例
+         * @type {Object|null}
+         */
+        this._layer = null;
+
+        /**
+         * 服务基地址
+         * 支持的服务如下：
+         * 1. IGS发布的ArcGIS服务：
+         *    - http://{ip}:{port}/igs/rest/services/{folder}/{serviceName}/arcgis/MapServer
+         * 2. ArcGIS服务：
+         *    - https://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer
+         * @type {String}
+         */
+        this._url = options.url;
+
+        /**
+         * 图层ID
+         * @type {String}
+         */
+        this._layerId = DataUtils.default(options.id + '_source', 'arcgis_mapimage_layer_' + new Date().getTime());
+
+        /**
+         * 数据源ID
+         * @type {String}
+         */
+        this._sourceId = this._layerId;
+
+        /**
+         * 坐标系
+         * 二维支持4326(包括4490、4214、4610)、3857以及EPSG支持的自定义坐标系
+         * 三维仅支持4326(包括4490、4214、4610)以及3857坐标系
+         * 会自动读取元信息上的坐标系，不需要用户指定
+         * @type {Object|null}
+         */
+        this._spatialReference = DataUtils.default(options.spatialReference, new zondy.SpatialReference({
+            wkid: mapConfig.map_srid_code
+        }));
+
+        /**
+         * 图层透明度 (0-1)，0为完全透明，1为不透明
+         * @type {Number}
+         */
+        this._opacity = DataUtils.default(options.opacity, 1);
+
+        /**
+         * 图层可见性，true则显示，false则隐藏
+         * @type {Boolean}
+         */
+        this._visible = DataUtils.default(options.visible, true);
+
+        /**
+         * 瓦片宽度，单位px（瓦片化显示时）
+         * @type {Number}
+         */
+        this._imageWidth = DataUtils.default(options.imageWidth, 256);
+
+        /**
+         * 瓦片高度，单位px（瓦片化显示时）
+         * @type {Number}
+         */
+        this._imageHeight = DataUtils.default(options.imageHeight, 256);
+
+        /**
+         * 最小显示比例尺，图层在视图中可见的最小比例尺
+         * @type {Number}
+         */
+        this._minScale = DataUtils.default(options.minScale, 0);
+
+        /**
+         * 最大显示比例尺，图层在视图中可见的最大比例尺
+         * @type {Number}
+         */
+        this._maxScale = DataUtils.default(options.maxScale, 0);
+
+        /**
+         * 图片中没有数据的地方是否透明
+         * @type {Boolean}
+         */
+        this._imageTransparency = DataUtils.default(options.imageTransparency, true);
+
+        /**
+         * 图片格式
+         * @type {String}
+         */
+        this._imageFormat = DataUtils.default(options.imageFormat, 'png');
+
+        /**
+         * 是否开启动态投影
+         * @type {Boolean}
+         */
+        this._dynamicProjectionEnabled = DataUtils.default(options.dynamicProjectionEnabled, false);
+
+        /**
+         * 图层类型
+         * @type {String}
+         */
+        this._type = DataUtils.default(options.type, 'arcgis-map-image');
+
+        /**
+         * 图层加载状态: 'unloaded' | 'loading' | 'loaded' | 'error'
+         * @type {String}
+         */
+        this._loadStatus = 'unloaded';
+
+        /**
+         * 事件监听器集合
+         * @type {Object}
+         */
+        this._eventListeners = {};
+
+        /**
+         * 是否自动跳转到图层范围
+         * @type {Boolean}
+         */
+        this._isFlyTo = DataUtils.default(options.isFlyTo, true);
+    }
+
+    /** ==================== Core Methods ==================== */
+
+    /**
+     * 加载图层资源
+     * @description 不加载图层到地图，仅获取图层信息
+     * @returns {Promise<ArcGISMapImageLayer>} 返回图层实例的 Promise
+     *
+     * @example
+     * const layer = new ArcGISMapImageLayer({
+     *     url: 'http://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer'
+     * });
+     * layer.load().then((result) => {
+     *     console.log(result); // 获取完图层信息
+     * });
+     */
+    load() {
+        return new Promise((resolve, reject) => {
+            try {
+                if (!this._layer) {
+                    const opts = this._buildOptions();
+                    this._layer = new zondy.layer.ArcGISMapImageLayer(opts);
+                }
+
+                // 监听图层加载完成事件
+                const handler = (result) => {
+                    // 移除事件监听器
+                    this._layer.off('layerview-created', handler);
+                    resolve(this);
+                };
+
+                this._layer.on('layerview-created', handler);
+
+                // 如果已经加载完成，直接返回
+                if (this._layer.loadStatus === 'loaded') {
+                    resolve(this);
+                }
+            } catch (error) {
+                reject(error);
+            }
+        });
+    }
+
+    /**
+     * 加载图层到地图
+     * @description 调用 zondy.layer.ArcGISMapImageLayer 加载图层数据，并添加到 Mapbox GL 地图中
+     * @returns {void}
+     *
+     * @example
+     * const layer = new ArcGISMapImageLayer({
+     *     type: 'arcgis-map-image',
+     *     map: mapboxMap,
+     *     url: 'http://xxx/arcgis/rest/services/Map/图层/MapServer'
+     * });
+     * layer.loadLayer();
+     */
+    loadLayer() {
+        if (this.hasLayer()) return;
+
+        const layer = new zondy.layer.ArcGISMapImageLayer(this._buildOptions())
+        this._layer = layer;
+        // 将图层添加到 MapGIS 地图对象
+        this.addToMapGisMap()
+        // 监听图层加载完成事件
+        layer.on('layerview-created',(result) => {
+            //视点跳转
+            this._isFlyTo && gisView.goTo({
+                layer: result.layer
+            })
+        });
+    }
+
+    /**
+     * 添加图层到 MapGIS 地图
+     */
+    addToMapGisMap() {
+        this._map.add(this._layer)
+    }
+
+    /**
+     * 显示/隐藏图层
+     * @param {Boolean} isShow - 是否显示图层（true: 显示，false: 隐藏）
+     */
+    showLayer(isShow) {
+        this._layer.visible = isShow
+    }
+
+    /**
+     * 判断图层是否已加载
+     *
+     * @returns {Boolean}
+     */
+    hasLayer() {
+        // 优先检查底层 zondy.layer.ArcGISMapImageLayer 的加载状态
+        if (this._layer && this._layer.isLoaded) {
+            return true;
+        }
+    }
+
+    /**
+     * 移除图层
+     */
+    removeLayer() {
+        // 移除底层 zondy.layer.ArcGISMapImageLayer
+        if (this._layer) {
+            this._layer.remove();
+            this._layer = null;
+        }
+
+        // 从管理器中移除
+        removeLayerFromManager(this._layer);
+    }
+
+    /**
+     * 根据子图层id查询子图层
+     * @param {String|Number} id - 子图层id
+     * @returns {Object|null} 子图层信息，如果未找到则返回 null
+     *
+     * @example
+     * const sublayer = layer.findSublayerById(1);
+     * if (sublayer) {
+     *     console.log('找到子图层:', sublayer);
+     * }
+     */
+    findSublayerById(id) {
+        if (!this._layer) {
+            console.warn('图层未加载，请先调用 load() 或 loadLayer()');
+            return null;
+        }
+
+        try {
+            // 调用底层图层的 findSublayerById 方法
+            return this._layer.findSublayerById(id);
+        } catch (error) {
+            console.error('查找子图层失败:', error);
+            return null;
+        }
+    }
+
+    /**
+     * 根据范围和大小获取 image 标签
+     * @param {Object} extent - 范围参数（Extent 对象）
+     * @param {Number} [width=256] - 图片宽度，单位px
+     * @param {Number} [height=256] - 图片高度，单位px
+     * @returns {Promise<HTMLImageElement>} 返回 image 标签的 Promise
+     *
+     * @example
+     * layer.fetchImage({
+     *     extent: new zondy.geometry.Extent(),
+     *     width: 256,
+     *     height: 256
+     * }).then((image) => {
+     *     // 这里返回一个html的image标签
+     *     document.body.appendChild(image);
+     * });
+     */
+    fetchImage(extent, width = 256, height = 256) {
+        return new Promise((resolve, reject) => {
+            if (!this._layer) {
+                reject(new Error('图层未加载，请先调用 load() 或 loadLayer()'));
+                return;
+            }
+
+            try {
+                // 调用底层图层的 fetchImage 方法
+                this._layer.fetchImage(extent, width, height).then((image) => {
+                    resolve(image);
+                }).catch((error) => {
+                    reject(error);
+                });
+            } catch (error) {
+                reject(error);
+            }
+        });
+    }
+
+    /**
+     * 根据参数获取图片的 url
+     * @param {Object} options - 参数选项
+     * @param {Object} [options.extent] - 图片范围（Extent 对象）
+     * @param {Number} [options.width=256] - 图片宽度
+     * @param {Number} [options.height=256] - 图片高度
+     * @returns {String} 图片的 url
+     *
+     * @example
+     * const url = layer.getImageUrl({
+     *     extent: new zondy.geometry.Extent(),
+     *     width: 256,
+     *     height: 256
+     * });
+     * console.log('图片URL:', url);
+     */
+    getImageUrl(options = {}) {
+        if (!this._layer) {
+            console.warn('图层未加载，请先调用 load() 或 loadLayer()');
+            return '';
+        }
+
+        try {
+            // 调用底层图层的 getImageUrl 方法
+            return this._layer.getImageUrl(options);
+        } catch (error) {
+            console.error('获取图片URL失败:', error);
+            return '';
+        }
+    }
+
+    /**
+     * 更新子图层
+     * @param {Object} arcGISSubLayer - 子图层配置对象
+     * @param {String|Number} arcGISSubLayer.id - 子图层id
+     * @param {Boolean} [arcGISSubLayer.visible] - 子图层可见性
+     * @param {Number} [arcGISSubLayer.index] - 子图层顺序
+     * @param {Object} [arcGISSubLayer.renderer] - 子图层渲染器
+     *
+     * @example
+     * layer.setSubLayer({
+     *     id: 1,
+     *     visible: true
+     * });
+     */
+    setSubLayer(arcGISSubLayer) {
+        if (!this._layer) {
+            console.warn('图层未加载，请先调用 load() 或 loadLayer()');
+            return;
+        }
+
+        try {
+            // 调用底层图层的 setSubLayer 方法
+            this._layer.setSubLayer(arcGISSubLayer);
+        } catch (error) {
+            console.error('更新子图层失败:', error);
+        }
+    }
+
+    /**
+     * 转换为 JSON 对象
+     * @returns {Object} JSON 对象
+     *
+     * @example
+     * const json = layer.toJSON();
+     * console.log(json);
+     */
+    toJSON() {
+        return {
+            url: this._url,
+            id: this._layerId,
+            opacity: this._opacity,
+            visible: this._visible,
+            spatialReference: this._spatialReference ? this._spatialReference.toJSON ? this._spatialReference.toJSON() : this._spatialReference : null,
+            imageWidth: this._imageWidth,
+            imageHeight: this._imageHeight,
+            minScale: this._minScale,
+            maxScale: this._maxScale,
+            imageTransparency: this._imageTransparency,
+            imageFormat: this._imageFormat,
+            dynamicProjectionEnabled: this._dynamicProjectionEnabled,
+            type: this._type
+        };
+    }
+
+    /**
+     * 克隆 ArcGISMapImageLayer 对象
+     * @returns {ArcGISMapImageLayer} 克隆后的 ArcGISMapImageLayer 实例
+     *
+     * @example
+     * const clonedLayer = layer.clone();
+     */
+    clone() {
+        const json = this.toJSON();
+        return ArcGISMapImageLayer.fromJSON(json);
+    }
+
+    /**
+     * 通过传入的 JSON 构造并返回一个新的 ArcGISMapImageLayer 实例
+     * @static
+     * @param {Object} json - JSON 对象
+     * @returns {ArcGISMapImageLayer} 新的 ArcGISMapImageLayer 实例
+     *
+     * @example
+     * const json = {
+     *     url: 'http://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer'
+     * };
+     * const layer = ArcGISMapImageLayer.fromJSON(json);
+     */
+    static fromJSON(json) {
+        if (!json || !json.url) {
+            throw new Error('JSON 对象必须包含 url 属性');
+        }
+
+        return new ArcGISMapImageLayer({
+            url: json.url,
+            id: json.id,
+            opacity: json.opacity,
+            visible: json.visible,
+            spatialReference: json.spatialReference,
+            imageWidth: json.imageWidth,
+            imageHeight: json.imageHeight,
+            minScale: json.minScale,
+            maxScale: json.maxScale,
+            imageTransparency: json.imageTransparency,
+            imageFormat: json.imageFormat,
+            dynamicProjectionEnabled: json.dynamicProjectionEnabled
+        });
+    }
+
+    /**
+     * 刷新图层
+     */
+    refresh() {
+        if (!this._layer) {
+            console.warn('图层未加载，请先调用 load() 或 loadLayer()');
+            return;
+        }
+
+        this._layer.refresh();
+    }
+
+
+
+
+
+    /**
+     * 设置图层透明度
+     * @param {Number} opacity - 透明度 (0-1)
+     */
+    setOpacity(opacity) {
+        this._opacity = opacity;
+
+        if (this._layer) {
+            this._layer.opacity = opacity;
+        }
+    }
+
+    /**
+     * 设置图层显隐
+     * @param {Boolean} visible - 是否可见
+     */
+    setVisible(visible) {
+        this._visible = visible;
+
+        if (this._layer) {
+            this._layer.visible = visible;
+        }
+    }
+
+
+
+    /** ==================== Getter/Setter ==================== */
+
+    /**
+     * 获取图层ID
+     * @returns {String}
+     */
+    get layerId() {
+        return this._layerId;
+    }
+
+    /**
+     * 获取服务URL
+     * @returns {String}
+     */
+    get url() {
+        return this._url;
+    }
+
+    /**
+     * 获取加载状态
+     * @returns {String}
+     */
+    get loadStatus() {
+        return this._loadStatus;
+    }
+
+    /**
+     * 获取图层类型
+     * @returns {String}
+     */
+    get type() {
+        return this._type;
+    }
+
+    /**
+     * 获取或设置动态投影开关
+     * @returns {Boolean}
+     */
+    get dynamicProjectionEnabled() {
+        return this._dynamicProjectionEnabled;
+    }
+
+    set dynamicProjectionEnabled(value) {
+        this._dynamicProjectionEnabled = value;
+        if (this._layer) {
+            this._layer.dynamicProjectionEnabled = value;
+        }
+    }
+
+    /**
+     * 获取图层实例
+     * @returns {Object}
+     */
+    get instance() {
+        return this._layer;
+    }
+
+    /** ==================== Private Methods ==================== */
+
+    /**
+     * 构建图层配置选项
+     * @returns {Object} 配置选项对象
+     */
+    _buildOptions() {
+        return {
+            url: this._url,
+            id: this._layerId,
+            opacity: this._opacity,
+            visible: this._visible,
+            spatialReference: this._spatialReference,
+            imageWidth: this._imageWidth,
+            imageHeight: this._imageHeight,
+            minScale: this._minScale,
+            maxScale: this._maxScale,
+            imageTransparency: this._imageTransparency,
+            imageFormat: this._imageFormat,
+            dynamicProjectionEnabled: this._dynamicProjectionEnabled,
+            type: this._type
+        };
+    }
+}