csk-gis-frame-work 4.0.0

package/mapboxgl/js/facility/FacilityProvider.js

@@ -0,0 +1,523 @@
+import DataUtils from "../utils/DataUtils";
+import GateLayer from "./GateLayer";
+import OutfallLayer from "./OutfallLayer";
+import FlapLayer from "./FlapLayer";
+
+import StorageLayer from "./StorageLayer";
+import RaininletLayer from "./RaininletLayer";
+import InterceptionLayer from "./InterceptionLayer";
+import InterceptionSewLayer from "./InterceptionsewLayer";
+import DitchLayer from "./DitchLayer";
+import PatrolAreaLayer from "./PatrolareaLayer";
+import { filter } from "lodash";
+
+/**
+ * 定义管网设施图层提供类
+ *
+ * @alias FacilityProvider
+ */
+export default class FacilityProvider {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 12);
+
+    /* 图层对象 */
+    this._gateLayer = null;      // 闸门
+    this._outfallLayer = null;   // 排放口
+    this._flapLayer= null; //拍门
+    this._storageLayer = null;   // 调蓄设施
+    this._raininletLayer = null; // 雨水口
+    this._interceptionLayer = null;    // 截流设施
+    this._sewInterceptionLayer = null; // 截污设施
+    this._ditchLayer = null; // 排水渠
+
+    this._patrolAreaLayer = null; // 片区
+
+    // 初始化图层
+    this._initLayers();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {String} type -类型
+   * @param {Array|Object} data -数据
+   */
+  setData(type, data = null) {
+    switch (type) {
+      case 'gate': { // 闸门
+        this._gateLayer.setData(data);
+        break;
+      }
+      case 'outfall': { // 排放口
+        this._outfallLayer.setData(data);
+        break;
+      }
+      case 'flap': { // 排放口
+        this._flapLayer.setData(data);
+        break;
+      }
+      case 'storage': { // 调蓄设施
+        this._storageLayer.setData(data);
+        break;
+      }
+      case 'raininlet': { // 雨水口
+        this._raininletLayer.setData(data);
+        break;
+      }
+      case 'interception': { // 截流设施
+        this._interceptionLayer.setData(data);
+        break;
+      }
+      case 'interceptionsew': { // 截污设施
+        this._sewInterceptionLayer.setData(data);
+        break;
+      }
+      case 'ditch': { // 排水渠
+        this._ditchLayer.setData(data);
+        break;
+      }
+      case 'patrolarea': { // 片区
+        this._patrolAreaLayer.setData(data);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 设置过滤器
+   * @param {String} type -类型
+   * @param {Array} filter -过滤器
+   */
+  setFilter(type, filter) {
+    switch (type) {
+      case 'gate': { // 闸门
+        this._gateLayer.setFilter(filter);
+        break;
+      }
+      case 'outfall': { // 排放口
+        this._outfallLayer.setFilter(filter);
+        break;
+      }
+      case 'flap': { // 拍门
+        this._flapLayer.setFilter(filter);
+        break;
+      }
+      case 'storage': { // 调蓄设施
+        this._storageLayer.setFilter(filter);
+        break;
+      }
+      case 'raininlet': { // 雨水口
+        this._raininletLayer.setFilter(filter);
+        break;
+      }
+      case 'interception': { // 截流设施
+        this._interceptionLayer.setFilter(filter);
+        break;
+      }
+      case 'interceptionsew': { // 截污设施
+        this._sewInterceptionLayer.setFilter(filter);
+        break;
+      }
+      case 'ditch': { // 排水渠
+        this._ditchLayer.setFilter(filter);
+        break;
+      }
+      case 'patrolarea': { // 片区
+        this._patrolAreaLayer.setFilter(filter);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 加载图层
+   * @param {String} type -类型
+   */
+  loadLayer(type) {
+    switch (type) {
+      case 'gate': { // 闸门
+        this._gateLayer.loadLayer();
+        break;
+      }
+      case 'outfall': { // 排放口
+        this._outfallLayer.loadLayer();
+        break;
+      }
+      case 'flap': { // 拍门
+        this._flapLayer.loadLayer();
+        break;
+      }
+      case 'storage': { // 调蓄设施
+        this._storageLayer.loadLayer();
+        break;
+      }
+      case 'raininlet': { // 雨水口
+        this._raininletLayer.loadLayer();
+        break;
+      }
+      case 'interception': { // 截流设施
+        this._interceptionLayer.loadLayer();
+        break;
+      }
+      case 'interceptionsew': { // 截污设施
+        this._sewInterceptionLayer.loadLayer();
+        break;
+      }
+      case 'ditch': { // 排水渠
+        this._ditchLayer.loadLayer();
+        break;
+      }
+      case 'patrolarea': { // 片区
+        this._patrolAreaLayer.loadLayer();
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {String} type -类型
+   * @param {Boolean} isShow -是否显示图层
+   */
+  showLayer(type, isShow) {
+    switch (type) {
+      case 'gate': { // 闸门
+        this._gateLayer.showLayer(isShow);
+        break;
+      }
+      case 'outfall': { // 排放口
+        this._outfallLayer.showLayer(isShow);
+        break;
+      }
+      case 'flap': { // 拍门
+        this._flapLayer.showLayer(isShow);
+        break;
+      }
+      case 'storage': { // 调蓄设施
+        this._storageLayer.showLayer(isShow);
+        break;
+      }
+      case 'raininlet': { // 雨水口
+        this._raininletLayer.showLayer(isShow);
+        break;
+      }
+      case 'interception': { // 截流设施
+        this._interceptionLayer.showLayer(isShow);
+        break;
+      }
+      case 'interceptionsew': { // 截污设施
+        this._sewInterceptionLayer.showLayer(isShow);
+        break;
+      }
+      case 'ditch': { // 排水渠
+        this._ditchLayer.showLayer(isShow);
+        break;
+      }
+      case 'patrolarea': { // 片区
+        this._patrolAreaLayer.showLayer(isShow);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 判断是否已加载图层
+   * @param {String} type -类型
+   *
+   * @returns {Boolean}
+   */
+  hasLayer(type) {
+    switch (type) {
+      case 'gate': // 闸门
+        return this._gateLayer.hasLayer();
+      case 'outfall': // 排放口
+        return this._outfallLayer.hasLayer();
+      case 'flap': // 拍门
+        return this._flapLayer.hasLayer();
+      case 'storage': // 调蓄设施
+        return this._storageLayer.hasLayer();
+      case 'raininlet': // 雨水口
+        return this._raininletLayer.hasLayer();
+      case 'interception': // 截流设施
+        return this._interceptionLayer.hasLayer();
+      case 'interceptionsew': // 截污设施
+        return this._sewInterceptionLayer.hasLayer();
+      case 'ditch': // 排水渠
+        return this._ditchLayer.hasLayer();
+      case 'patrolarea': // 片区
+        return this._patrolAreaLayer.hasLayer();
+      default:
+        return false;
+    }
+  }
+
+  /**
+   * 移除图层
+   * @param {String} type -类型
+   */
+  removeLayer(type) {
+    switch (type) {
+      case 'gate': { // 闸门
+        this._gateLayer.removeLayer();
+        break;
+      }
+      case 'outfall': { // 排放口
+        this._outfallLayer.removeLayer();
+        break;
+      }
+      case 'flap': { // 排放口
+        this._flapLayer.removeLayer();
+        break;
+      }
+      case 'storage': { // 调蓄设施
+        this._storageLayer.removeLayer();
+        break;
+      }
+      case 'raininlet': { // 雨水口
+        this._raininletLayer.removeLayer();
+        break;
+      }
+      case 'interception': { // 截流设施
+        this._interceptionLayer.removeLayer();
+        break;
+      }
+      case 'interceptionsew': { // 截污设施
+        this._sewInterceptionLayer.removeLayer();
+        break;
+      }
+      case 'ditch': { // 排水渠
+        this._ditchLayer.removeLayer();
+        break;
+      }
+      case 'patrolarea': { // 片区
+        this._patrolAreaLayer.removeLayer();
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 移除所有图层(销毁时调用)
+   */
+  removeAllLayers() {
+    // 闸门
+    this._gateLayer.removeLayer();
+    this._gateLayer.removeSource();
+
+    // 排放口
+    this._outfallLayer.removeLayer();
+    this._outfallLayer.removeSource();
+
+    // 拍门
+    this._flapLayer.removeLayer();
+    this._flapLayer.removeSource();
+
+    // 调蓄设施
+    this._storageLayer.removeLayer();
+    this._storageLayer.removeSource();
+
+    // 雨水口
+    this._raininletLayer.removeLayer();
+    this._raininletLayer.removeSource();
+
+    // 截流设施
+    this._interceptionLayer.removeLayer();
+    this._interceptionLayer.removeSource();
+
+    // 截污设施
+    this._sewInterceptionLayer.removeLayer();
+    this._sewInterceptionLayer.removeSource();
+
+    // 排水渠
+    this._ditchLayer.removeLayer();
+    this._ditchLayer.removeSource();
+
+    // 片区
+    this._patrolAreaLayer.removeLayer();
+    this._patrolAreaLayer.removeSource();
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} type -设施类型
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  bindEvent(type, name, event) {
+    switch (type) {
+      case 'gate': { // 闸门
+        this._gateLayer.onEvent(name, event);
+        break;
+      }
+      case 'outfall': { // 排放口
+        this._outfallLayer.onEvent(name, event);
+        break;
+      }
+      case 'flap': { // 拍门
+        this._flapLayer.onEvent(name, event);
+        break;
+      }
+      case 'storage': { // 调蓄设施
+        this._storageLayer.onEvent(name, event);
+        break;
+      }
+      case 'raininlet': { // 雨水口
+        this._raininletLayer.onEvent(name, event);
+        break;
+      }
+      case 'interception': { // 截流设施
+        this._interceptionLayer.onEvent(name, event);
+        break;
+      }
+      case 'interceptionsew': { // 截污设施
+        this._sewInterceptionLayer.onEvent(name, event);
+        break;
+      }
+      case 'ditch': { // 排水渠
+        this._ditchLayer.onEvent(name, event);
+        break;
+      }
+      case 'patrolarea': { // 片区
+        this._patrolAreaLayer.onEvent(name, event);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {String} type -设施类型
+   * @param {Function} event -事件函数
+   */
+  bindClickEvent(type, event) {
+    switch (type) {
+      case 'gate': { // 闸门
+        this._gateLayer.onClick(event);
+        break;
+      }
+      case 'outfall': { // 排放口
+        this._outfallLayer.onClick(event);
+        break;
+      }
+      case 'flap': { // 拍门
+        this._flapLayer.onClick(event);
+        break;
+      }
+      case 'storage': { // 调蓄设施
+        this._storageLayer.onClick(event);
+        break;
+      }
+      case 'raininlet': { // 雨水口
+        this._raininletLayer.onClick(event);
+        break;
+      }
+      case 'interception': { // 截流设施
+        this._interceptionLayer.onClick(event);
+        break;
+      }
+      case 'interceptionsew': { // 截污设施
+        this._sewInterceptionLayer.onClick(event);
+        break;
+      }
+      case 'ditch': { // 排水渠
+        this._ditchLayer.onClick(event);
+        break;
+      }
+      case 'patrolarea': { // 片区
+        this._patrolAreaLayer.onClick(event);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /** 私有方法 **/
+  /**
+   * 初始化图层
+   */
+  _initLayers() {
+    const map = this._map;
+    const minZoom = this._minzoom;
+
+    // 闸门
+    this._gateLayer = new GateLayer({
+      map: map,
+      minzoom: minZoom + 1.0
+    });
+
+    // 排放口
+    this._outfallLayer = new OutfallLayer({
+      map: map,
+      minzoom: minZoom + 2.0
+    });
+
+    // 拍门
+    this._flapLayer = new FlapLayer({
+        map: map,
+        minzoom: minZoom + 2.0,
+    });
+
+    // 调蓄设施
+    this._storageLayer = new StorageLayer({
+      map: map,
+      minzoom: minZoom+ 1.0
+    });
+
+    // 雨水口
+    this._raininletLayer = new RaininletLayer({
+      map: map,
+      minzoom: minZoom + 4.75
+    });
+
+    // 截流设施
+    this._interceptionLayer = new InterceptionLayer({
+      map: map,
+      minzoom: minZoom+ 1.0
+    });
+
+    // 截污设施
+    this._sewInterceptionLayer = new InterceptionSewLayer({
+      map: map,
+      minzoom: minZoom + 2.0
+    });
+
+    // 排水渠
+    this._ditchLayer = new DitchLayer({
+      map: map,
+      minzoom: minZoom
+    });
+
+    // 片区
+    this._patrolAreaLayer = new PatrolAreaLayer({
+      map: map,
+      minzoom: minZoom
+    });
+  }
+}

package/mapboxgl/js/facility/FlapLayer.js

@@ -0,0 +1,196 @@
+import DataUtils from '../utils/DataUtils';
+import SimpleMarkerLayer from '../common/SimpleMarkerLayer';
+
+/**
+ * 定义拍门图层
+ *
+ * @alias Flaplayer
+ *
+ * @summary <用于加载拍门点位图层>
+ */
+export default class Flaplayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /**
+     * 图标ID
+     * @type {String}
+     */
+    this._icon = DataUtils.default(options.icon, 'equip_door-green');
+    this._iconFocus = 'busi_focus';
+
+    /**
+     * 字段名
+     * @type {String}
+     */
+    this._field = DataUtils.default(options.field, undefined);
+
+    /**
+     * 文字大小
+     * @type {Number}
+     */
+    this._textSize = DataUtils.default(options.textSize, 13);
+
+    /**
+     * 文本偏移
+     * @type {Array}
+     */
+    this._textOffset = DataUtils.default(options.textOffset, [0, 1.5]);
+
+    /**
+     * 过滤条件数组
+     * @type {Array}
+     */
+    this._filter = ['==', ['get', 'flap'], 1];
+    //DataUtils.default(options.filter, undefined);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_outfall');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, "pipe_flap");
+
+    // 创建标记图层
+    this._markerLayer = new SimpleMarkerLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      icon: this._icon,
+      field: this._field,
+      textSize: this._textSize,
+      textOffset: this._textOffset,
+      filter: this._filter,
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+
+  /**
+   * 设置数据
+   * @param {Object|Array} data -GeoJson要素/要素集/数组/过滤器
+   */
+  setData(data = null) {
+    // 加载图层
+    this.loadLayer();
+
+    if (data) {
+      this._markerLayer.setData(data);
+    }
+  }
+  /**
+   * 聚焦数据
+   * @param {Array|Object} data -数据
+   * @param {Number} zoom -缩放层级
+   * @param {Boolean} jump -是否直接定位
+   */
+  setFocus(data, zoom = null, jump = false) {
+    // this._markerLayer.setFocus(data, zoom, jump);
+
+
+    // // 加载图层
+    // if (!this.hasLayer()) {
+    //   this.loadLayer();
+    // }
+    // // 隐藏图层
+    // this.showLayer(false);
+
+    // console.log("Layer ID:", this._layerId);
+    // console.log("Focus Icon:", this._iconFocus);
+
+    // // 设置聚焦图标
+    // this._map.setLayoutProperty(this._layerId, 'icon-image', this._iconFocus);
+    // this._map.setLayoutProperty(this._layerId, 'icon-offset', [0, 0]);
+
+    // 更新数据源
+    // this._updateDataSource(data, zoom, false, jump);
+    // 显示图层
+    this.showLayer(true);
+  }
+  /**
+   * 设置过滤器
+   * @param {Array} filter -过滤器
+   */
+  setFilter(filter) {
+    this._markerLayer.setFilter(filter);
+  }
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this._markerLayer.loadLayer();
+    }
+
+    // 显示图层
+    this.showLayer(true);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示
+   */
+  showLayer(isShow) {
+    this._markerLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._markerLayer.hasLayer();
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._markerLayer.removeLayer();
+  }
+
+  /**
+   * 移除数据源
+   */
+  removeSource() {
+    this._markerLayer.removeSource();
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  onClick(event) {
+    this._markerLayer.onClick(event);
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  onEvent(name, event) {
+    this._markerLayer.onEvent(name, event);
+  }
+}