csk-gis-frame-work 4.0.0

package/mapgis/js/datalayer/ogc-layer/wfsLayer.js

@@ -0,0 +1,670 @@
+import DataUtils from '../../../../mapboxgl/js/utils/DataUtils';
+import {removeLayerFromManager} from "../";
+
+/**
+ * 定义 MapGIS Common API WFS图层类
+ *
+ * @alias WFSLayer
+ *
+ * @summary <用于加载和管理WFS服务图层，基于 MapGIS Client for JavaScript Common 模块>
+ * @description 该类负责具体的图层操作逻辑，包括图层的加载、显示/隐藏、移除等。
+ *              底层通过 zondy.layer.WFSLayer 与地图进行交互。
+ */
+export default class WFSLayer {
+    /**
+     * 构造函数
+     * @param {Object} options - 图层配置选项
+     * @param {Object} options.map - 地图对象（mapboxgl.Map 实例）
+     * @param {String} options.url - 服务基地址
+     * @param {String} [options.id] - 图层ID（可选，不传则自动生成）
+     * @param {String} [options.sublayerId] - WFS服务的子图层名称
+     * @param {Number} [options.index] - 图层顺序
+     * @param {Number} [options.opacity=1] - 图层透明度 (0-1)
+     * @param {Boolean} [options.visible=true] - 图层可见性
+     * @param {Object} [options.renderer] - 渲染样式（UniqueValueRenderer/ClassBreakRenderer/SimpleRenderer）
+     * @param {Boolean} [options.labelsVisible=false] - 是否开启动态注记（仅支持三维场景）
+     * @param {Array} [options.labelingInfo=[]] - 注记样式数组（仅支持三维场景）
+     * @param {Object} [options.elevationInfo] - 高程样式（仅支持三维场景）
+     * @param {Boolean|null} [options.isReverseXY=null] - 是否翻转x、y坐标
+     */
+    constructor(options) {
+        /**
+         * 地图对象
+         * @type {Object}
+         */
+        this._map = options.map;
+
+        /**
+         * 视图对象
+         * @type {Object}
+         */
+        this._view = options.view;
+
+        this._layer = null
+
+        /**
+         * 服务基地址
+         * 支持的服务如下：
+         * 1. IGS1.0的WFS服务：http://{ip}:{port}/igs/rest/ogc/layer/{folder}:{serviceName}/WFSServer
+         * 2. IGS2.0的WFS服务：http://{ip}:{port}/igs/rest/services/{folder}/{serviceName}/WFSServer
+         * @type {String}
+         */
+        this._url = options.url;
+
+        /**
+         * WFS服务的子图层名称
+         * 规则：
+         * 1. 不指定子图层ID则查询第0个子图层
+         * 2. 指定时，则查询指定sublayerId的子图层
+         * 3. 仅支持单图层的要素查询，不支持多图层和子图层的要素查询
+         * @type {String|null}
+         */
+        this._sublayerId = DataUtils.default(options.sublayerId, null);
+
+        /**
+         * 图层ID
+         * @type {String}
+         */
+        this._layerId = DataUtils.default(options.id, 'wfs_layer_' + new Date().getTime());
+
+        /**
+         * 数据源ID
+         * @type {String}
+         */
+        this._sourceId = this._layerId;
+
+        /**
+         * 图层顺序
+         * @type {Number|undefined}
+         */
+        this._index = options.index !== undefined ? options.index : undefined;
+
+        /**
+         * 图层透明度 (0-1)，0为完全透明，1为不透明
+         * @type {Number}
+         */
+        this._opacity = DataUtils.default(options.opacity, 1);
+
+        /**
+         * 图层可见性，true则显示，false则隐藏
+         * @type {Boolean}
+         */
+        this._visible = DataUtils.default(options.visible, true);
+
+        /**
+         * 渲染样式
+         * 支持的渲染样式：
+         * 1. UniqueValueRenderer - 单值专题图
+         * 2. ClassBreakRenderer - 分段专题图
+         * 3. SimpleRenderer - 统一专题图
+         * @type {Object|null}
+         */
+        this._renderer = DataUtils.default(options.renderer, null);
+
+        /**
+         * 是否开启动态注记，仅支持三维场景
+         * @type {Boolean}
+         */
+        this._labelsVisible = DataUtils.default(options.labelsVisible, false);
+
+        /**
+         * 注记样式数组，可以和renderer同时启用
+         * 默认取数组的第一个样式，仅支持三维场景
+         * @type {Array}
+         */
+        this._labelingInfo = DataUtils.default(options.labelingInfo, []);
+
+        /**
+         * 高程样式，仅支持三维场景
+         * @type {Object|null}
+         */
+        this._elevationInfo = DataUtils.default(options.elevationInfo, null);
+
+        /**
+         * 是否翻转x、y坐标
+         * 默认为null，未设置是否翻转x，y坐标，按照内部默认情况处理
+         * IGS、GeoServer、SuperMap、ArcGIS服务
+         * @type {Boolean|null}
+         */
+        this._isReverseXY = DataUtils.default(options.isReverseXY, null);
+
+        /**
+         * 图层类型
+         * @type {String}
+         */
+        this._type = DataUtils.default(options.type, 'wfs');
+
+        /**
+         * 图层加载状态: 'unloaded' | 'loading' | 'loaded' | 'error'
+         * @type {String}
+         */
+        this._loadStatus = 'unloaded';
+
+        /**
+         * 事件监听器集合
+         * @type {Object}
+         */
+        this._eventListeners = {};
+
+        this._isFlyTo = DataUtils.default(options.isFlyTo, true);
+    }
+
+    _buildOptions() {
+        const options = {
+            url: this._url,
+            type: this._type,
+            id: this._layerId,
+            opacity: this._opacity,
+            visible: this._visible,
+            labelsVisible: this._labelsVisible,
+            labelingInfo: this._labelingInfo,
+            isReverseXY: this._isReverseXY
+        };
+
+        // 如果指定了子图层ID，添加到选项中
+        if (this._sublayerId) {
+            options.sublayerId = this._sublayerId;
+        }
+
+        // 如果指定了图层顺序，添加到选项中
+        if (this._index !== undefined) {
+            options.index = this._index;
+        }
+
+        // 如果指定了渲染样式，添加到选项中
+        if (this._renderer) {
+            options.renderer = this._renderer;
+        }
+
+        // 如果指定了高程样式，添加到选项中
+        if (this._elevationInfo) {
+            options.elevationInfo = this._elevationInfo;
+        }
+
+        return options;
+    }
+
+    /** ==================== Core Methods ==================== */
+
+    /**
+     * 加载图层资源
+     * @description 不加载图层到地图，仅获取图层信息
+     * @returns {Promise<WFSLayer>} 返回图层实例的 Promise
+     *
+     * @example
+     * const layer = new WFSLayer({
+     *     url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer'
+     * });
+     * 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.WFSLayer(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.WFSLayer 加载图层数据，并添加到 Mapbox GL 地图中
+     * @returns {Promise<void>}
+     *
+     * @example
+     * const layer = createLayer({
+     *     type: 'wfs',
+     *     map: mapboxMap,
+     *     url: 'http://xxx/igs/rest/services/Map/WFSServer'
+     * });
+     * await layer.loadLayer();
+     */
+    loadLayer() {
+        if (this.hasLayer()) return;
+
+        const layer = new zondy.layer.WFSLayer(this._buildOptions())
+        this._layer = layer;
+        // 将图层添加到 MapGIS 地图对象
+        this.addToMapGisMap()
+        // 监听图层加载完成事件
+        layer.on('layerview-created',(result) => {
+            //视点跳转
+            this._isFlyTo && gisView.goTo({
+                layer: result.layer
+            })
+        });
+    }
+
+    addToMapGisMap() {
+        this._map.add(this._layer)
+    }
+
+    /**
+     * 显示/隐藏图层
+     * @param {Boolean} isShow - 是否显示图层（true: 显示，false: 隐藏）
+     */
+    showLayer(isShow) {
+        this._layer.visible = isShow
+    }
+
+    /**
+     * 判断图层是否已加载
+     *
+     * @returns {Boolean}
+     */
+    hasLayer() {
+        // 优先检查底层 zondy.layer.WFSLayer 的加载状态
+        if (this._layer && this._layer.isLoaded) {
+            return true;
+        }
+    }
+
+    /**
+     * 移除图层
+     */
+    removeLayer() {
+        // 移除底层 zondy.layer.WFSLayer
+        if (this._layer) {
+            this._layer.remove();
+            this._layer = null;
+        }
+
+        // 从管理器中移除
+        removeLayerFromManager(this._layer);
+    }
+
+    /**
+     * 指定图层的要素查询
+     * @param {Object} queryOptions - 查询选项，参考WFSServer#queryFeatures接口的入参
+     * @returns {Promise} 返回FeatureSet的Promise对象
+     */
+    queryFeatures(queryOptions) {
+        if (!this._layer) {
+            console.warn('WFS图层未加载');
+            return Promise.reject(new Error('WFS图层未加载'));
+        }
+
+        return this._layer.queryFeatures(queryOptions);
+    }
+
+    /**
+     * 查询要素数量
+     * @param {Object} queryOptions - 查询选项，参考WFSServer#queryFeatures接口的入参
+     * @returns {Promise<Number>} 返回要素数量的Promise对象
+     */
+    queryFeaturesCount(queryOptions) {
+        if (!this._layer) {
+            console.warn('WFS图层未加载');
+            return Promise.reject(new Error('WFS图层未加载'));
+        }
+
+        return this._layer.queryFeaturesCount(queryOptions);
+    }
+
+    /**
+     * 通过传入的json构造并返回一个新的WFSLayer对象
+     * @param {Object} json - JSON对象
+     * @returns {WFSLayer} WFSLayer实例
+     */
+    static fromJSON(json) {
+        const { WFSLayer } = zondy.layer;
+        const instance = WFSLayer.fromJSON(json);
+        return instance;
+    }
+
+    /**
+     * 克隆WFSLayer对象
+     * @returns {WFSLayer} 克隆后的WFSLayer实例
+     */
+    clone() {
+        if (!this._layer) {
+            console.warn('WFS图层未加载，无法克隆');
+            return null;
+        }
+
+        return this._layer.clone();
+    }
+
+    /**
+     * 导出为json对象
+     * @returns {Object} JSON对象
+     */
+    toJSON() {
+        if (!this._layer) {
+            console.warn('WFS图层未加载');
+            return {};
+        }
+
+        return this._layer.toJSON();
+    }
+
+    /**
+     * 判断图层是否加载成功
+     * @returns {Boolean} 图层是否加载成功
+     */
+    isLoaded() {
+        return this._loadStatus === 'loaded';
+    }
+
+    /**
+     * 刷新图层
+     */
+    refresh() {
+        if (!this._wfsLayerInstance) {
+            console.warn('WFS图层未加载');
+            return;
+        }
+
+        this._wfsLayerInstance.refresh();
+    }
+
+    /**
+     * 销毁图层
+     */
+    destroy() {
+        if (!this._wfsLayerInstance) {
+            return;
+        }
+
+        try {
+            // 移除事件监听
+            this._removeAllEventListeners();
+
+            // 从地图中移除
+            if (this._map) {
+                this._map.remove(this._wfsLayerInstance);
+            }
+
+            // 销毁图层实例
+            this._wfsLayerInstance.destroy();
+            this._wfsLayerInstance = null;
+            this._loadStatus = 'unloaded';
+
+            this._emitEvent('layerview-remove', { layer: this });
+        } catch (error) {
+            console.error('WFS图层销毁失败:', error);
+        }
+    }
+
+    /**
+     * 设置属性值
+     * @param {String} path - 属性路径
+     * @param {*} value - 属性值
+     * @returns {Boolean} 是否设置成功
+     */
+    setProperty(path, value) {
+        if (!this._wfsLayerInstance) {
+            console.warn('WFS图层未加载');
+            return false;
+        }
+
+        return this._wfsLayerInstance.setProperty(path, value);
+    }
+
+    /**
+     * 获取属性值
+     * @param {String} path - 属性路径
+     * @returns {*} 属性值
+     */
+    getProperty(path) {
+        if (!this._wfsLayerInstance) {
+            console.warn('WFS图层未加载');
+            return undefined;
+        }
+
+        return this._wfsLayerInstance.getProperty(path);
+    }
+
+    /**
+     * 设置图层透明度
+     * @param {Number} opacity - 透明度 (0-1)
+     */
+    setOpacity(opacity) {
+        this._opacity = opacity;
+
+        if (this._wfsLayerInstance) {
+            this._wfsLayerInstance.opacity = opacity;
+        }
+    }
+
+    /**
+     * 设置图层显隐
+     * @param {Boolean} visible - 是否可见
+     */
+    setVisible(visible) {
+        this._visible = visible;
+
+        if (this._wfsLayerInstance) {
+            this._wfsLayerInstance.visible = visible;
+        }
+    }
+
+    /**
+     * 设置渲染样式
+     * @param {Object} renderer - 渲染样式对象
+     */
+    setRenderer(renderer) {
+        this._renderer = renderer;
+
+        if (this._wfsLayerInstance) {
+            this._wfsLayerInstance.renderer = renderer;
+        }
+    }
+
+    /**
+     * 注册事件监听器
+     * @param {String} eventName - 事件名称
+     * @param {Function} callback - 回调函数
+     */
+    on(eventName, callback) {
+        if (!this._eventListeners[eventName]) {
+            this._eventListeners[eventName] = [];
+        }
+        this._eventListeners[eventName].push(callback);
+
+        // 如果图层实例已存在，也注册到实例上
+        if (this._wfsLayerInstance) {
+            this._wfsLayerInstance.on(eventName, callback);
+        }
+    }
+
+    /**
+     * 移除事件监听器
+     * @param {String} eventName - 事件名称
+     * @param {Function} callback - 回调函数
+     */
+    off(eventName, callback) {
+        if (this._eventListeners[eventName]) {
+            this._eventListeners[eventName] = this._eventListeners[eventName].filter(
+                cb => cb !== callback
+            );
+        }
+
+        // 如果图层实例已存在，也从实例上移除
+        if (this._wfsLayerInstance && callback) {
+            this._wfsLayerInstance.off(eventName, callback);
+        }
+    }
+
+    /** ==================== Getter/Setter ==================== */
+
+    /**
+     * 获取图层ID
+     * @returns {String}
+     */
+    get layerId() {
+        return this._layerId;
+    }
+
+    /**
+     * 获取服务URL
+     * @returns {String}
+     */
+    get url() {
+        return this._url;
+    }
+
+    /**
+     * 获取子图层ID
+     * @returns {String}
+     */
+    get sublayerId() {
+        return this._sublayerId;
+    }
+
+    /**
+     * 获取加载状态
+     * @returns {String}
+     */
+    get loadStatus() {
+        return this._loadStatus;
+    }
+
+    /**
+     * 获取图层实例
+     * @returns {Object}
+     */
+    get instance() {
+        return this._layer;
+    }
+
+    /**
+     * 获取渲染样式
+     * @returns {Object}
+     */
+    get renderer() {
+        return this._renderer;
+    }
+
+    /**
+     * 设置渲染样式
+     * @param {Object} value - 渲染样式
+     */
+    set renderer(value) {
+        this.setRenderer(value);
+    }
+
+    /**
+     * 获取透明度
+     * @returns {Number}
+     */
+    get opacity() {
+        return this._opacity;
+    }
+
+    /**
+     * 设置透明度
+     * @param {Number} value - 透明度
+     */
+    set opacity(value) {
+        this.setOpacity(value);
+    }
+
+    /**
+     * 获取可见性
+     * @returns {Boolean}
+     */
+    get visible() {
+        return this._visible;
+    }
+
+    /**
+     * 设置可见性
+     * @param {Boolean} value - 可见性
+     */
+    set visible(value) {
+        this.setVisible(value);
+    }
+
+    /** ==================== 私有方法 ==================== */
+
+    /**
+     * 构建图层配置选项
+     * @returns {Object} 配置选项对象
+     */
+    _buildOptions() {
+        const options = {
+            url: this._url,
+            type: this._type,
+            id: this._layerId,
+            opacity: this._opacity,
+            visible: this._visible,
+            labelsVisible: this._labelsVisible,
+            labelingInfo: this._labelingInfo,
+            isReverseXY: this._isReverseXY
+        };
+
+        // 如果指定了子图层ID，添加到选项中
+        if (this._sublayerId) {
+            options.sublayerId = this._sublayerId;
+        }
+
+        // 如果指定了图层顺序，添加到选项中
+        if (this._index !== undefined) {
+            options.index = this._index;
+        }
+
+        // 如果指定了渲染样式，添加到选项中
+        if (this._renderer) {
+            options.renderer = this._renderer;
+        }
+
+        // 如果指定了高程样式，添加到选项中
+        if (this._elevationInfo) {
+            options.elevationInfo = this._elevationInfo;
+        }
+
+        return options;
+    }
+
+    /**
+     * 触发事件
+     * @param {String} eventName - 事件名称
+     * @param {*} data - 事件数据
+     */
+    _emitEvent(eventName, data) {
+        if (this._eventListeners[eventName]) {
+            this._eventListeners[eventName].forEach(callback => {
+                try {
+                    callback(data);
+                } catch (error) {
+                    console.error(`事件 ${eventName} 回调执行失败:`, error);
+                }
+            });
+        }
+    }
+
+    /**
+     * 移除所有事件监听器
+     */
+    _removeAllEventListeners() {
+        if (this._wfsLayerInstance) {
+            Object.keys(this._eventListeners).forEach(eventName => {
+                this._eventListeners[eventName].forEach(callback => {
+                    this._wfsLayerInstance.off(eventName, callback);
+                });
+            });
+        }
+        this._eventListeners = {};
+    }
+}