csk-gis-frame-work 4.0.0

package/mapboxgl/js/event/EventProvider.js

@@ -0,0 +1,426 @@
+import DataUtils from '../utils/DataUtils';
+import VerifyUtils from '../utils/VerifyUtils';
+import EventDefectLayer from './EventDefectLayer';
+import EventMixLayer from './EventMixLayer';
+import EventPourLayer from './EventPourLayer';
+import EventDrainerLayer from './EventDrainerLayer';
+import EventOtherLayer from './EventOtherLayer';
+import EventPolicyWaterLayer from './EventPolicyWaterLayer';
+import EventWaterLayer from './EventWaterLayer';
+import EventBranchPipeLayer from './EventBranchPipeLayer';
+import EventOtherWaterLayer from './EventOtherWaterLayer';
+
+/**
+ * 定义设备提供类
+ *
+ * @alias EventProvider
+ *
+ * @summary <用于加载设备点位图层>
+ */
+export default class EventProvider {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /* 数据源/图层ID */
+    this._drainerSourceId = 'pipe_event_drainer'; // 排水户异常
+    this._otherSourceId = 'pipe_event_other'; // 其它点
+    this._policySourceId = 'pipe_event_policy'; //政策性外水
+    this._defectSourceId = 'pipe_event_defect';     // 管网缺陷
+    this._mixSourceId = 'pipe_event_mix'; // 雨污混接
+    this._pourSourceId = 'pipe_event_pour'; // 倒灌点
+    this._waterSourceId = 'pipe_event_water'; // 水系管网接入点
+    this._branchpipeSourceId = 'pipe_event_branchpipe'; // 支管接入点
+    this._otherwaterSourceId = 'pipe_event_otherwater'; // 其它问题接入点
+
+    /* 图层 */
+    this._drainerLayer = null;
+    this._otherLayer = null;
+    this._policyLayer = null;
+    this._defectLayer = null;
+    this._mixLayer = null;
+    this._pourLayer = null;
+    this._waterLayer = null;
+    this._branchpipeLayer = null;
+    this._otherwaterLayer=null;
+
+    // 初始化图层对象
+    this._initLayers();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {String} type -类型
+   * @param {Array} data -点位数组
+   */
+  setData(type, data) {
+    if (!data || !VerifyUtils.isArray(data)) return;
+
+    let layer = null;
+    switch (type) {
+      case 'drainer': //排水户异常
+        layer = this._drainerLayer;
+        break;
+      case 'other': // 其它点
+        layer = this._otherLayer;
+        break;
+      case 'policy': // 政策性外水
+        layer = this._policyLayer;
+        break;
+      case 'defect': // 管网缺陷
+        layer = this._defectLayer;
+        break;
+      case 'mix': // 雨污混接
+        layer = this._mixLayer;
+        break;
+      case 'pour': // 倒灌点
+        layer = this._pourLayer;
+        break;
+      case 'water': // 水系管网接入点
+        layer = this._waterLayer;
+        break;
+      case 'branchpipe': // 支管接入点
+        layer = this._branchpipeLayer;
+        break;
+      case 'otherwater': // 其它问题接入点
+        layer = this._otherwaterLayer;
+        break;
+      default:
+        break;
+    }
+    if (!layer) return;
+
+    // 设置数据
+    if (data) {
+      layer.setData(data);
+    }
+  }
+
+  /**
+   * 设置筛选器
+   * @param {String} type -类型
+   * @param {Array} filter -筛选器
+   */
+  setFilter(type, filter) {
+    switch (type) {
+      case 'drainer': //排水户异常
+        this._drainerLayer.setFilter(filter);
+        break;
+      case 'other': // 其它点
+        this._otherLayer.setFilter(filter);
+        break;
+      case 'policy': // 政策性外水
+        this._policyLayer.setFilter(filter);
+        break;
+      case 'defect': // 管网缺陷
+        this._defectLayer.setFilter(filter);
+        break;
+      case 'mix':  // 雨污混接
+        this._mixLayer.setFilter(filter);
+        break;
+      case 'pour': // 倒灌点
+        this._pourLayer.setFilter(filter);
+        break;
+      case 'water': // 水系管网接入点
+        this._waterLayer.setFilter(filter);
+        break;
+      case 'branchpipe': // 支管接入点
+        this._branchpipeLayer.setFilter(filter);
+        break;
+      case 'otherwater': // 其它问题接入点
+        this._otherwaterLayer.setFilter(filter);
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {String} type -类型
+   * @param {Boolean} isShow -是否显示
+   */
+  showLayer(type, isShow) {
+    switch (type) {
+      case 'drainer': //排水户异常
+        this._drainerLayer.showLayer(isShow);
+        break;
+      case 'other': // 其它点
+        this._otherLayer.showLayer(isShow);
+        break;
+      case 'policy': // 政策性外水
+        this._policyLayer.showLayer(isShow);
+        break;
+      case 'defect':// 管网缺陷
+        this._defectLayer.showLayer(isShow);
+        break;
+      case 'mix': // 雨污混接
+        this._mixLayer.showLayer(isShow);
+        break;
+      case 'pour': // 倒灌点
+        this._pourLayer.showLayer(isShow);
+        break;
+      case 'water': // 水系管网接入点
+        this._waterLayer.showLayer(isShow);
+        break;
+      case 'branchpipe': // 支管接入点
+        this._branchpipeLayer.showLayer(isShow);
+        break;
+      case 'otherwater': // 其它问题接入点
+        this._otherwaterLayer.showLayer(isShow);
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 移除图层
+   * @param {String} type -类型
+   */
+  removeLayer(type) {
+    switch (type) {
+      case 'drainer':// 排水户异常
+        this._drainerLayer.removeLayer();
+        break;
+      case 'other'://其它点
+        this._otherLayer.removeLayer();
+        break;
+      case 'policy':// 政策性外水
+        this._policyLayer.removeLayer();
+        break;
+      case 'defect':// 管网缺陷
+        this._defectLayer.removeLayer();
+        break;
+      case 'mix': // 雨污混接
+        this._mixLayer.removeLayer();
+        break;
+      case 'pour': // 倒灌点
+        this._pourLayer.removeLayer();
+        break;
+      case 'water': // 水系管网接入点
+        this._waterLayer.removeLayer();
+        break;
+      case 'branchpipe': // 支管接入点
+        this._branchpipeLayer.removeLayer();
+        break;
+      case 'otherwater': // 其它问题接入点
+        this._otherwaterLayer.removeLayer();
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 移除所有图层
+   */
+  removeAllLayers() {
+    // 排水户异常
+    this._drainerLayer.removeLayer();
+    // 其它
+    this._otherLayer.removeLayer();
+    // 政策性外水
+    this._policyLayer.removeLayer();
+    // 管网缺陷
+    this._defectLayer.removeLayer();
+
+    // 雨污混接
+    this._mixLayer.removeLayer();
+    // 倒灌点
+    this._pourLayer.removeLayer();
+
+    // 水系管网接入点
+    this._waterLayer.removeLayer();
+
+    // 支管接入点
+    this._branchpipeLayer.removeLayer();
+
+    //其它问题接入点
+    this._otherwaterLayer.removeLayer();
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {String} type -类型
+   * @param {Function} event -事件函数
+   */
+  onClick(type, event) {
+    switch (type) {
+      case 'drainer': { // 排水户异常
+        this._drainerLayer.onClick(event);
+        break;
+      }
+      case 'other': { // 其它
+        this._otherLayer.onClick(event);
+        break;
+      }
+      case 'policy': { // 政策性外水
+        this._policyLayer.onClick(event);
+        break;
+      }
+      case 'defect': { // 管网缺陷
+        this._defectLayer.onClick(event);
+        break;
+      }
+      case 'mix': { // 雨污混接
+        this._mixLayer.onClick(event);
+        break;
+      }
+      case 'pour': {// 倒灌点
+        this._pourLayer.onClick(event);
+        break;
+      }
+      case 'water': { // 水系管网接入点
+        this._waterLayer.onClick(event);
+      }
+      case 'branchpipe': { // 支管接入点
+        this._branchpipeLayer.onClick(event);
+        break;
+      }
+      case 'otherwater': { // 其它问题接入点
+        this._otherwaterLayer.onClick(event);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} type -类型
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  onEvent(type, name, event) {
+    switch (type) {
+      case 'drainer': { // 排水户异常
+        this._drainerLayer.onEvent(name, event);
+        break;
+      }
+      case 'other': { // 其它
+        this._otherLayer.onEvent(name, event);
+        break;
+      }
+      case 'policy': { // 政策性外水
+        this._policyLayer.onEvent(name, event);
+        break;
+      }
+      case 'defect': { // 管网缺陷
+        this._defectLayer.onEvent(name, event);
+        break;
+      }
+      case 'mix': { // 雨污混接
+        this._mixLayer.onEvent(name, event);
+        break;
+      }
+      case 'pour': {// 倒灌点
+        this._pourLayer.onEvent(name, event);
+        break;
+      }
+      case 'water': { // 水系管网接入点
+        this._waterLayer.onEvent(name, event);
+      }
+      case 'branchpipe': { // 支管接入点
+        this._branchpipeLayer.onEvent(name, event);
+        break;
+      }
+      case 'otherwater': { // 其它问题接入点
+        this._otherwaterLayer.onEvent(name, event);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /** 私有方法 **/
+  /**
+   * 初始化图层
+   */
+  _initLayers() {
+    const map = this._map;
+    const minZoom = this._minzoom;
+
+
+    // 排水户异常
+    this._drainerLayer = new EventDrainerLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._culvertSourceId
+    });
+
+     // 其它
+     this._otherLayer = new EventOtherLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._otherSourceId
+    });
+
+     // 政策性外水
+     this._policyLayer = new EventPolicyWaterLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._policySourceId
+    });
+
+
+     // 管网缺陷图层
+    this._defectLayer = new EventDefectLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._defectSourceId
+    });
+
+
+    // 雨污混接图层
+    this._mixLayer = new EventMixLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._mixSourceId
+    });
+
+     // 倒灌点图层
+    this._pourLayer = new EventPourLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._pourSourceId
+    });
+
+    // 水系管网接入点
+    this._waterLayer = new EventWaterLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._waterSourceId
+    });
+
+    // 支管接入点
+    this._branchpipeLayer = new EventBranchPipeLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._branchpipeSourceId
+    });
+
+     // 其它问题接入点
+     this._otherwaterLayer = new EventOtherWaterLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._otherwaterSourceId
+    });
+  }
+}

package/mapboxgl/js/event/EventWaterLayer.js

@@ -0,0 +1,108 @@
+import DataUtils from '../utils/DataUtils';
+import EventLayer from './EventLayer';
+
+/**
+ * 定义水系管网接入点图层类
+ *
+ * @alias EventWaterLayer
+ *
+ * @summary <用于加载易涝点位图层>
+ */
+export default class EventWaterLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_event_water');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 初始化图层
+    this._eventLayer = new EventLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      icon: 'ladle-shortgreen',
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置设备点数据
+   * @param {Object|Array} data -GeoJson要素/要素集/数组
+   */
+  setData(data) {
+    this._eventLayer.setData(data);
+  }
+
+  /**
+   * 设置过滤器
+   * @param {Array} filter -过滤器
+   */
+  setFilter(filter) {
+    this._eventLayer.setFilter(filter);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示
+   */
+  showLayer(isShow) {
+    this._eventLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._eventLayer.hasLayer();
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._eventLayer.removeLayer();
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  onClick(event) {
+    this._eventLayer.onClick(event);
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  onEvent(name, event) {
+    this._eventLayer.onEvent(name, event);
+  }
+}

package/mapboxgl/js/facility/DitchLayer.js

@@ -0,0 +1,171 @@
+import DataUtils from '../utils/DataUtils';
+import VerifyUtils from '../utils/VerifyUtils';
+import SimpleLineLayer from '../common/SimpleLineLayer';
+
+/**
+ * 定义排水渠图层
+ *
+ * @alias DitchLayer
+ *
+ * @summary <用于加载排水渠图层>
+ */
+ export default class DitchLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /**
+     * 线颜色
+     * @type {String}
+     */
+    this._lineColor = DataUtils.default(options.color, '#17EEDC');
+
+    /**
+     * 线宽
+     * @type {Number}
+     */
+    this._lineWidth = DataUtils.default(options.width, 7.5);
+
+    /**
+     * 透明度
+     * @type {Number} (0-1)
+     */
+    this._lineOpacity = DataUtils.default(options.opacity, 1.0);
+
+    /**
+     * 过滤条件数组
+     * @type {Array}
+     */
+    this._filter = DataUtils.default(options.filter, undefined);
+
+    /**
+     * 数据源ID
+     * @typr {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_ditch');
+
+    /**
+     * 图层ID
+     * @typr {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    /* 图层对象 */
+    this._lineLayer = new SimpleLineLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      //color: this._lineColor,
+      color: {
+        type: 'categorical',
+        property: 'ditch_type',
+        stops: [
+          ['1', '#17EEDC'],
+          ['2', '#006C63']
+        ],
+        default: '#17EEDC'
+      },
+      width: this._lineWidth,
+      opacity: this._lineOpacity,
+      filter: this._filter,
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {Object|String} data -数据/过滤条件
+   */
+  setData(data = null) {
+    // 加载图层
+    this.loadLayer();
+
+    if (data) {
+      this._lineLayer.setData(data);
+    }
+  }
+
+  /**
+   * 设置筛选器
+   * @param {Array} filter -筛选器
+   */
+  setFilter(filter) {
+    this._lineLayer.setFilter(filter);
+  }
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this._lineLayer.loadLayer();
+    }
+
+    // 显示图层
+    this.showLayer(true);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示图层
+   */
+  showLayer(isShow) {
+    this._lineLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._lineLayer.hasLayer();
+  }
+
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._lineLayer.removeLayer();
+  }
+
+  /**
+   * 移除数据源
+   */
+  removeSource() {
+    this._lineLayer.removeSource();
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  onClick(event) {
+    this._lineLayer.onClick(event);
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  onEvent(name, event) {
+    this._lineLayer.onEvent(name, event);
+  }
+}