csk-gis-frame-work 4.0.0

package/mapgis/js/datalayer/igs-layer/ImageryTileLayer.js

@@ -0,0 +1,413 @@
+import DataUtils from '../../../../mapboxgl/js/utils/DataUtils';
+
+/**
+ * 定义 MapGIS Common API 影像服务瓦片图层类
+ *
+ * @alias ImageryTileLayer
+ *
+ * @summary <用于加载和管理影像服务瓦片图层，基于 MapGIS Client for JavaScript Common 模块>
+ */
+export default class ImageryTileLayer {
+    /**
+     * 构造函数
+     * @param {Object} options - 图层选项
+     * @param {Object} options.map - 地图对象(mapboxgl.Map 实例)
+     * @param {String} options.url - 服务地址
+     * @param {String} [options.id] - 图层ID(可选,不传则自动生成)
+     * @param {String} [options.title=''] - 图层名称
+     * @param {String} [options.description=''] - 图层描述
+     * @param {String} [options.copyright=''] - 版权所有
+     * @param {Object|null} [options.tileInfo=null] - 瓦片切图信息
+     * @param {Array|null} [options.bandIds=null] - 波段号
+     * @param {String} [options.interpolation=''] - 重采样方式
+     * @param {Object|null} [options.serviceRasterInfo=null] - 栅格信息
+     * @param {Object|null} [options.clippingArea=null] - 图层空间裁剪范围
+     * @param {Object|null} [options.spatialReference=null] - 图层坐标系对象
+     * @param {Object|null} [options.extent=null] - 图层的范围
+     * @param {Number} [options.minScale=0] - 最小显示比例尺
+     * @param {Number} [options.maxScale=0] - 最大显示比例尺
+     * @param {Number} [options.opacity=1] - 图层透明度 (0-1)
+     * @param {Boolean} [options.visible=true] - 图层可见性
+     * @param {String} [options.tokenKey='token'] - Token键名
+     * @param {String} [options.tokenValue=''] - Token值
+     * @param {Object} [options.headers={}] - 设置服务请求头
+     * @param {String} [options.httpMethod='GET'] - HTTP请求方式
+     * @param {Object} [options.capabilities={}] - 图层支持能力
+     * @param {Object} [options.extendProps={}] - 额外属性
+     * @param {Object} [options.extensionOptions={}] - 初始化图层的额外参数
+     */
+    constructor(options) {
+        /**
+         * 地图对象
+         * @type {Object}
+         */
+        this._map = options.map;
+
+        /**
+         * 视图对象
+         * @type {Object}
+         */
+        this._view = options.view;
+
+        this._layer = null
+
+        /**
+         * 服务地址
+         * @type {String}
+         */
+        this._url = DataUtils.default(options.url, '');
+
+        /**
+         * 图层ID
+         * @type {String}
+         */
+        this._layerId = DataUtils.default(options.id, 'imagery_tile_layer_' + new Date().getTime());
+
+        /**
+         * 图层名称
+         * @type {String}
+         */
+        this._title = DataUtils.default(options.title, '');
+
+        /**
+         * 图层描述
+         * @type {String}
+         */
+        this._description = DataUtils.default(options.description, '');
+
+        /**
+         * 版权所有
+         * @type {String}
+         */
+        this._copyright = DataUtils.default(options.copyright, '');
+
+        /**
+         * 瓦片切图信息
+         * @type {Object|null}
+         */
+        this._tileInfo = DataUtils.default(options.tileInfo, null);
+
+        /**
+         * 波段号
+         * @type {Array|null}
+         */
+        this._bandIds = DataUtils.default(options.bandIds, null);
+
+        /**
+         * 重采样方式
+         * @type {String}
+         */
+        this._interpolation = DataUtils.default(options.interpolation, '');
+
+        /**
+         * 栅格信息
+         * @type {Object|null}
+         */
+        this._serviceRasterInfo = DataUtils.default(options.serviceRasterInfo, null);
+
+        /**
+         * 图层空间裁剪范围
+         * @type {Object|null}
+         */
+        this._clippingArea = DataUtils.default(options.clippingArea, null);
+
+        /**
+         * 图层坐标系对象
+         * @type {Object|null}
+         */
+        this._spatialReference = DataUtils.default(options.spatialReference, null);
+
+        /**
+         * 图层的范围
+         * @type {Object|null}
+         */
+        this._extent = DataUtils.default(options.extent, null);
+
+        /**
+         * 最小显示比例尺
+         * @type {Number}
+         */
+        this._minScale = DataUtils.default(options.minScale, 0);
+
+        /**
+         * 最大显示比例尺
+         * @type {Number}
+         */
+        this._maxScale = DataUtils.default(options.maxScale, 0);
+
+        /**
+         * 图层透明度 (0-1)
+         * @type {Number}
+         */
+        this._opacity = DataUtils.default(options.opacity, 1);
+
+        /**
+         * 图层可见性
+         * @type {Boolean}
+         */
+        this._visible = DataUtils.default(options.visible, true);
+
+        /**
+         * Token键名
+         * @type {String}
+         */
+        this._tokenKey = DataUtils.default(options.tokenKey, 'token');
+
+        /**
+         * Token值
+         * @type {String}
+         */
+        this._tokenValue = DataUtils.default(options.tokenValue, '');
+
+        /**
+         * 设置服务请求头
+         * @type {Object}
+         */
+        this._headers = DataUtils.default(options.headers, {});
+
+        /**
+         * HTTP请求方式
+         * @type {String}
+         */
+        this._httpMethod = DataUtils.default(options.httpMethod, 'GET');
+
+        /**
+         * 图层支持能力
+         * @type {Object}
+         */
+        this._capabilities = DataUtils.default(options.capabilities, {});
+
+        /**
+         * 额外属性
+         * @type {Object}
+         */
+        this._extendProps = DataUtils.default(options.extendProps, {});
+
+        /**
+         * 初始化图层的额外参数
+         * @type {Object}
+         */
+        this._extensionOptions = DataUtils.default(options.extensionOptions, {});
+
+        /**
+         * 图层类型
+         * @type {String}
+         */
+        this._type = DataUtils.default(options.type, 'imagery-tile-layer');
+
+        /**
+         * 图层加载状态: '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,
+            tileInfo: this._tileInfo,
+            bandIds: this._bandIds,
+            interpolation: this._interpolation,
+            serviceRasterInfo: this._serviceRasterInfo,
+            clippingArea: this._clippingArea,
+            title: this._title,
+            description: this._description,
+            copyright: this._copyright,
+            minScale: this._minScale,
+            maxScale: this._maxScale,
+            opacity: this._opacity,
+            visible: this._visible,
+            tokenKey: this._tokenKey,
+            tokenValue: this._tokenValue,
+            headers: this._headers,
+            httpMethod: this._httpMethod,
+            capabilities: this._capabilities,
+            extendProps: this._extendProps,
+            extensionOptions: this._extensionOptions
+        };
+
+        if (this._spatialReference) {
+            options.spatialReference = this._spatialReference;
+        }
+
+        if (this._extent) {
+            options.extent = this._extent;
+        }
+
+        return options;
+    }
+
+    /** ==================== Core Methods ==================== */
+
+    /**
+     * 加载图层资源
+     * @description 不加载图层到地图,仅获取图层信息
+     * @returns {Promise<ImageryTileLayer>} 返回图层实例的 Promise
+     */
+    load() {
+        return new Promise((resolve, reject) => {
+            try {
+                if (!this._layer) {
+                    const opts = this._buildOptions();
+                    // 引入 MapGIS Common API ImageryTileLayer 类
+                    const { ImageryTileLayer } = zondy.layer;
+                    const { initializeOptions, initializeCRS } = zondy.mapboxgl.util;
+                    
+                    initializeOptions(opts);
+                    initializeCRS(opts);
+
+                    this._layer = new ImageryTileLayer(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.ImageryTileLayer 加载图层数据,并添加到 Mapbox GL 地图中
+     * @returns {void}
+     */
+    loadLayer() {
+        if (this.hasLayer()) return;
+
+        const { ImageryTileLayer } = zondy.layer;
+        const { initializeOptions, initializeCRS } = zondy.mapboxgl.util;
+
+        const opts = this._buildOptions();
+        initializeOptions(opts);
+        initializeCRS(opts);
+
+        const layer = new ImageryTileLayer(opts);
+        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) {
+        if (this._layer) {
+            this._layer.visible = isShow;
+        }
+    }
+
+    /**
+     * 判断图层是否已加载
+     * @returns {Boolean}
+     */
+    hasLayer() {
+        if (this._layer && this._layer.isLoaded) {
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * 移除图层
+     */
+    removeLayer() {
+        if (this._layer) {
+            this._layer.remove();
+            this._layer = null;
+        }
+    }
+
+    /**
+     * 通过传入的json构造并返回一个新的ImageryTileLayer对象
+     * @param {Object} json - JSON对象
+     * @returns {ImageryTileLayer} ImageryTileLayer实例
+     */
+    static fromJSON(json) {
+        const { ImageryTileLayer } = zondy.layer;
+        return ImageryTileLayer.fromJSON(json);
+    }
+
+    /**
+     * 克隆ImageryTileLayer对象
+     * @returns {ImageryTileLayer} 克隆后的ImageryTileLayer实例
+     */
+    clone() {
+        if (!this._layer) {
+            console.warn('影像瓦片图层未加载，无法克隆');
+            return null;
+        }
+        return this._layer.clone();
+    }
+
+    /**
+     * 导出为json对象
+     * @returns {Object} JSON对象
+     */
+    toJSON() {
+        if (!this._layer) {
+            console.warn('影像瓦片图层未加载');
+            return {};
+        }
+        return this._layer.toJSON();
+    }
+
+    /** ==================== Getter/Setter ==================== */
+
+    /**
+     * 获取图层ID
+     * @returns {String}
+     */
+    get layerId() {
+        return this._layerId;
+    }
+
+    /**
+     * 获取服务URL
+     * @returns {String}
+     */
+    get url() {
+        return this._url;
+    }
+
+    /**
+     * 获取图层实例
+     * @returns {Object|null}
+     */
+    get instance() {
+        return this._layer;
+    }
+}

package/mapgis/js/datalayer/index.js

@@ -0,0 +1,206 @@
+import ArcGISMapImageLayer from './arcgis-layer/ArcGISMapImageLayer';
+import ArcGISTileLayer from './arcgis-layer/ArcGISTileLayer';
+import ArcGISVectorTileLayer from './arcgis-layer/ArcGISVectorTileLayer';
+
+import Cesium3DTilesCacheLayer from './common-layer/Cesium3DTilesCacheLayer';
+import EchartsLayer from './common-layer/EchartsLayer';
+
+import IGSFeatureLayer from './igs-layer/IGSFeatureLayer';
+import IGSImageryLayer from './igs-layer/IGSImageryLayer';
+import IGSImageryTileLayer from './igs-layer/IGSImageryTileLayer';
+import IGSMapImageLayer from './igs-layer/IGSMapImageLayer';
+import IGSTileLayer from './igs-layer/IGSTileLayer';
+import IGSVectorTileLayer from './igs-layer/IGSVectorTileLayer';
+import ImageryLayer from './igs-layer/ImageryLayer';
+import ImageryTileLayer from './igs-layer/ImageryTileLayer';
+
+import OGCLayer from './ogc-layer/OGCLayer';
+import wfsLayer from './ogc-layer/wfsLayer';
+import wmsLayer from './ogc-layer/wmsLayer';
+import wmtsLayer from './ogc-layer/wmtsLayer';
+
+/**
+ * 图层实例管理数组
+ * 用于存储所有通过 createLayer 创建的图层实例
+ * @type {Array<Object>}
+ */
+const dataLayers = [];
+const dataLayerIds = [];
+
+/**
+ * 创建图层实例的工厂方法
+ * @param {Object} options - 图层配置选项
+ * @param {String} options.type - 图层类型标识
+ * @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] - 坐标系
+ * @returns {Object} 图层实例（具体类型取决于 options.type）
+ *
+ * @example
+ * // 创建 IGS 地图图片图层
+ * const layer = createLayer({
+ *     type: 'igs-map-image',
+ *     map: mapboxMap,
+ *     url: 'http://xxx/igs/rest/services/Map/图层/MapServer'
+ * });
+ * layer.loadLayer();
+ */
+export function createLayer(options) {
+    const { type, ...layerOptions } = options;
+
+    let layerInstance = null;
+
+    switch (type) {
+        // ArcGIS 图层
+        case 'arcgis-map-image':
+            layerInstance = new ArcGISMapImageLayer(layerOptions);
+            break;
+        case 'arcgis-tile':
+            layerInstance = new ArcGISTileLayer(layerOptions);
+            break;
+        case 'arcgis-vector-tile':
+            layerInstance = new ArcGISVectorTileLayer(layerOptions);
+            break;
+
+        // Common 图层
+        case 'cesium-3dtiles-cache':
+            layerInstance = new Cesium3DTilesCacheLayer(layerOptions);
+            break;
+        case 'echarts':
+            layerInstance = new EchartsLayer(layerOptions);
+            break;
+
+        // IGS 图层
+        case 'igs-feature':
+            layerInstance = new IGSFeatureLayer(layerOptions);
+            break;
+        case 'igs-imagery':
+            layerInstance = new IGSImageryLayer(layerOptions);
+            break;
+        case 'igs-imagery-tile':
+            layerInstance = new IGSImageryTileLayer(layerOptions);
+            break;
+        case 'igs-map-image':
+            layerInstance = new IGSMapImageLayer(layerOptions);
+            break;
+        case 'igs-tile':
+            layerInstance = new IGSTileLayer(layerOptions);
+            break;
+        case 'igs-vector-tile':
+            layerInstance = new IGSVectorTileLayer(layerOptions);
+            break;
+
+        // OGC 图层
+        case 'ogc':
+            layerInstance = new OGCLayer(layerOptions);
+            break;
+        case 'wfs':
+            layerInstance = new wfsLayer(layerOptions);
+            break;
+        case 'wms':
+            layerInstance = new wmsLayer(layerOptions);
+            break;
+        case 'wmts':
+            layerInstance = new wmtsLayer(layerOptions);
+            break;
+
+        default:
+            console.warn(`未知的图层类型: ${type}`);
+            return null;
+    }
+
+    // 将创建的图层实例添加到管理数组中
+    if (layerInstance) {
+        dataLayers.push(layerInstance);
+        dataLayerIds.push(layerInstance._layerId);
+    }
+
+    return layerInstance;
+}
+
+/**
+ * 获取所有图层实例
+ * @param {Object} [filter] - 过滤条件（可选）
+ * @param {String} [filter.type] - 按图层类型过滤
+ * @param {String} [filter.layerId] - 按图层ID过滤
+ * @param {Object} [filter.map] - 按地图对象过滤
+ * @returns {Array<Object>} 图层实例数组
+ *
+ * @example
+ * // 获取所有图层
+ * const allLayers = getDataLayers();
+ *
+ * // 按类型过滤
+ * const igsLayers = getDataLayers({ type: 'igs-map-image' });
+ *
+ * // 按图层ID过滤
+ * const specificLayer = getDataLayers({ layerId: 'my_layer_id' });
+ */
+export function getDataLayers(filter = null) {
+    if (!filter) {
+        return [...dataLayers]; // 返回副本，防止外部修改
+    }
+
+    return dataLayers.filter(layer => {
+        let match = true;
+
+        // 按类型过滤
+        if (filter.type && layer._type !== filter.type) {
+            match = false;
+        }
+
+        // 按图层ID过滤
+        if (filter.layerId && layer._layerId !== filter.layerId) {
+            match = false;
+        }
+
+        // 按地图对象过滤
+        if (filter.map && layer._map !== filter.map) {
+            match = false;
+        }
+
+        return match;
+    });
+}
+
+/**
+ * 移除指定的图层实例（从管理数组中移除）
+ * @param {Object} layerInstance - 要移除的图层实例
+ * @returns {Boolean} 是否成功移除
+ */
+export function removeLayerFromManager(layerInstance) {
+    const layerId = layerInstance._layerId || layerInstance.id;
+    const index = dataLayerIds.indexOf(layerId);
+
+    if (index > -1) {
+        // 同步删除两个数组中的对应项
+        dataLayerIds.splice(index, 1);
+        dataLayers.splice(index, 1);
+        console.log('图层已移除，当前图层数量:', dataLayers.length);
+        return true;
+    }
+
+    console.warn('未找到要移除的图层:', layerId);
+    return false;
+}
+
+/**
+ * 清空所有图层实例（从管理数组中移除）
+ * @param {Object} [map] - 如果提供地图对象，只清空该地图的图层
+ */
+export function clearLayers(map = null) {
+    if (map) {
+        // 只移除指定地图的图层
+        for (let i = dataLayers.length - 1; i >= 0; i--) {
+            if (dataLayers[i]._map === map) {
+                dataLayers.splice(i, 1);
+            }
+        }
+    } else {
+        // 清空所有图层
+        dataLayers.length = 0;
+    }
+}