csk-gis-frame-work 4.0.0

package/mapboxgl/js/equipment/EquipmentProvider.js

@@ -0,0 +1,545 @@
+import DataUtils from '../utils/DataUtils';
+import VerifyUtils from '../utils/VerifyUtils';
+import EquipLiquidLayer from './EquipLiquidLayer';
+import EquipPumpLayer from './EquipPumpLayer';
+import EquipRaingaugeLayer from './EquipRaingaugeLayer';
+import EquipFloodedLayer from './EquipFloodedLayer';
+import EquipOtherLayer from './EquipOtherLayer';
+import OverflowLayer from './OverflowLayer';
+import EquipNh3Layer from './EquipNh3Layer';
+import EquipDoorLayer from './EquipDoorLayer';
+import EquipCODLayer from './EquipCODLayer';
+import EquipSpeedLayer from './EquipSpeedLayer';
+import EquipWellLayer from './EquipWellLayer';
+import EquippHLayer from './EquippHLayer';
+import EquipFlowLayer from './EquipFlowLayer';
+
+/**
+ * 定义设备提供类
+ *
+ * @alias EquipmentProvider
+ *
+ * @summary <用于加载设备点位图层>
+ */
+export default class EquipmentProvider {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /* 数据源/图层ID */
+    this._liquidSourceId = 'pipe_equipment_liquid'; // 液位计
+    this._pumpSourceId = 'pipe_equipment_pump';     // 泵站
+    this._raingaugeSourceId = 'pipe_equipment_raingauge'; // 雨量计
+    this._floodedSourceId = 'pipe_equipment_flooded'; // 易涝点
+    this._otherSourceId = 'pipe_equipment_other'; // 其他
+    this._overflowSourceId = 'pipe_equipment_overflow'; // 淤塞溢流
+    this._flowSourceId = 'pipe_equipment_flow'; // 流量计
+    this._speedSourceId = 'pipe_equipment_speed'; // 流速仪
+    this._phSourceId = 'pipe_equipment_ph'; // pH计
+    this._codSourceId = 'pipe_equipment_cod'; // COD
+    this._wellSourceId = 'pipe_equipment_well'; // 智能井盖
+    this._doorSourceId = 'pipe_equipment_door'; // 截污拍门
+    this._nh3SourceId = 'pipe_equipment_nh3'; // 氨氮
+
+    /* 图层 */
+    this._liquidLayer = null;
+    this._pumpLayer = null;
+    this._raingaugeLayer = null;
+    this._floodedLayer = null;
+    this._otherLayer = null;
+    this._overflowLayer = null;
+
+    // 初始化图层对象
+    this._initLayers();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {String} type -类型
+   * @param {Array} data -点位数组
+   */
+  setData(type, data) {
+    if (!data || !VerifyUtils.isArray(data)) return;
+
+    let layer = null;
+    switch (type) {
+      case 'liquid'://液位计
+        layer = this._liquidLayer;
+        break;
+      case 'pump'://泵站
+        layer = this._pumpLayer;
+        break;
+      case 'rain': // 雨量计
+        layer = this._raingaugeLayer;
+        break;
+      case 'flood': // 易涝点
+        layer = this._floodedLayer;
+        break;
+      case 'other': // 其他
+        layer = this._otherLayer;
+        break;
+      case 'overflow': // 溢流
+        layer = this._overflowLayer;
+        break;
+      case 'nh3':  // 氨氮
+        layer = this._nh3layer;
+        break;
+      case 'door':  // 截污拍门
+        layer = this._doorlayer;
+        break;
+      case 'cod':  // COD
+        layer = this._codLayer;
+        break;
+      case 'speed':  // 流速仪
+        layer = this._speedlayer;
+        break;
+      case 'flow':  // 流量计
+        layer = this._flowlayer;
+        break;
+      case 'well':  // 井盖
+        layer = this._welllayer;
+        break;
+      case 'ph':  //ph计
+        layer = this._phlayer;
+        break;
+      default:
+        break;
+    }
+    if (!layer) return;
+
+    // 设置数据
+    if (data) {
+      layer.setData(data);
+    }
+  }
+
+  /**
+   * 设置筛选器
+   * @param {String} type -类型
+   * @param {Array} filter -筛选器
+   */
+  setFilter(type, filter) {
+    switch (type) {
+      case 'liquid':
+        this._liquidLayer.setFilter(filter);
+        break;
+      case 'pump':
+        this._pumpLayer.setFilter(filter);
+        break;
+      case 'rain': // 雨量计
+        this._raingaugeLayer.setFilter(filter);
+        break;
+      case 'flood': // 易涝点
+        this._floodedLayer.setFilter(filter);
+        break;
+      case 'other': // 其他
+        this._otherLayer.setFilter(filter);
+        break;
+      case 'overflow': // 溢流
+        this._overflowLayer.setFilter(filter);
+        break;
+      case 'nh3':  // 氨氮
+        this._nh3layer.showLayer(isShow);
+        break;
+      case 'door':  // 截污拍门
+        this._doorlayer.showLayer(isShow);
+        break;
+      case 'cod':  // COD
+        this._codLayer.showLayer(isShow);
+        break;
+      case 'speed':  // 流速仪
+        this._speedlayer.showLayer(isShow);
+        break;
+      case 'flow':  // 流量计
+        this._flowlayer.showLayer(isShow);
+        break;
+      case 'well':  // 井盖
+        this._welllayer.showLayer(isShow);
+        break;
+      case 'ph':  //ph计
+        this._phlayer.showLayer(isShow);
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {String} type -类型
+   * @param {Boolean} isShow -是否显示
+   */
+  showLayer(type, isShow) {
+    switch (type) {
+      case 'liquid':
+        this._liquidLayer.showLayer(isShow);
+        break;
+      case 'pump':
+        this._pumpLayer.showLayer(isShow);
+        break;
+      case 'rain': // 雨量计
+        this._raingaugeLayer.showLayer(isShow);
+        break;
+      case 'flood': // 易涝点
+        this._floodedLayer.showLayer(isShow);
+        break;
+      case 'other': // 其他
+        this._otherLayer.showLayer(isShow);
+        break;
+      case 'overflow': // 溢流
+        this._overflowLayer.showLayer(isShow);
+        break;
+      case 'nh3':  // 氨氮
+        this._nh3layer.showLayer(isShow);
+        break;
+      case 'door':  // 截污拍门
+        this._doorlayer.showLayer(isShow);
+        break;
+      case 'cod':  // COD
+        this._codLayer.showLayer(isShow);
+        break;
+      case 'speed':  // 流速仪
+        this._speedlayer.showLayer(isShow);
+        break;
+      case 'flow':  // 流量计
+        this._flowlayer.showLayer(isShow);
+        break;
+      case 'well':  // 井盖
+        this._welllayer.showLayer(isShow);
+        break;
+      case 'ph':  //ph计
+        this._phlayer.showLayer(isShow);
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 移除图层
+   * @param {String} type -类型
+   */
+  removeLayer(type) {
+    switch (type) {
+      case 'liquid':
+        this._liquidLayer.removeLayer();
+        break;
+      case 'pump':
+        this._pumpLayer.removeLayer();
+        break;
+      case 'rain': // 雨量计
+        this._raingaugeLayer.removeLayer();
+        break;
+      case 'flood': // 易涝点
+        this._floodedLayer.removeLayer();
+        break;
+      case 'other': // 其他
+        this._otherLayer.removeLayer();
+        break;
+      case 'overflow': // 溢流
+        this._overflowLayer.removeLayer();
+        break;
+      case 'nh3':  // 氨氮
+          this._nh3layer.removeLayer();
+          break;
+      case 'door':  // 截污拍门
+          this._doorlayer.removeLayer();
+          break;
+      case 'cod':  // COD
+          this._codLayer.removeLayer();
+          break;
+      case 'speed':  // 流速仪
+          this._speedlayer.removeLayer();
+          break;
+      case 'flow':  // 流量计
+          this._flowlayer.removeLayer();
+          break;
+      case 'well':  // 井盖
+          this._welllayer.removeLayer();
+          break;
+      case 'ph':  //ph计
+          this._phlayer.removeLayer();
+          break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 移除所有图层
+   */
+  removeAllLayers() {
+    // 液位计
+    this._liquidLayer.removeLayer();
+    // 泵站
+    this._pumpLayer.removeLayer();
+
+    // 雨量计
+    this._raingaugeLayer.removeLayer();
+    // 易涝点
+    this._floodedLayer.removeLayer();
+
+    // 其他
+    this._otherLayer.removeLayer();
+
+    // 溢流
+    this._overflowLayer.removeLayer();
+
+    // 氨氮
+    this._nh3layer.removeLayer();
+    // 截污拍门
+    this._doorlayer.removeLayer();
+    // COD
+    this._codLayer.removeLayer();
+    // 流速仪
+    this._speedlayer.removeLayer();
+    // 流量计
+    this._flowlayer.removeLayer();
+    // 井盖
+    this._welllayer.removeLayer();
+    //ph计
+    this._phlayer.removeLayer();
+
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {String} type -类型
+   * @param {Function} event -事件函数
+   */
+  onClick(type, event) {
+    switch (type) {
+      case 'liquid': {
+        this._liquidLayer.onClick(event);
+        break;
+      }
+      case 'pump': {
+        this._pumpLayer.onClick(event);
+        break;
+      }
+      case 'rain': { // 雨量计
+        this._raingaugeLayer.onClick(event);
+        break;
+      }
+      case 'flood': {// 易涝点
+        this._floodedLayer.onClick(event);
+        break;
+      }
+      case 'other': { // 其他
+        this._otherLayer.onClick(event);
+      }
+      case 'overflow': { // 溢流
+        this._overflowLayer.onClick(event);
+        break;
+      }
+      case 'nh3': { // 氨氮
+        this._nh3layer.onClick(event);
+        break;
+      }
+      case 'door': { // 截污拍门
+        this._doorlayer.onClick(event);
+        break;
+      }
+      case 'cod': { // COD
+        this._codLayer.onClick(event);
+        break;
+      }
+      case 'speed': { // 流速仪
+        this._speedlayer.onClick(event);
+        break;
+      }
+      case 'flow': { // 流量计
+        this._flowlayer.onClick(event);
+        break;
+      }
+      case 'well': { // 井盖
+        this._welllayer.onClick(event);
+        break;
+      }
+      case 'ph': { //ph计
+        this._phlayer.onClick(event);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} type -类型
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  onEvent(type, name, event) {
+    switch (type) {
+      case 'liquid': {
+        this._liquidLayer.onEvent(name, event);
+        break;
+      }
+      case 'pump': {
+        this._pumpLayer.onEvent(name, event);
+        break;
+      }
+      case 'rain': { // 雨量计
+        this._raingaugeLayer.onEvent(name, event);
+        break;
+      }
+      case 'flood': {// 易涝点
+        this._floodedLayer.onEvent(name, event);
+        break;
+      }
+      case 'other': { // 其他
+        this._otherLayer.onEvent(name, event);
+      }
+      case 'overflow': { // 溢流
+        this._overflowLayer.onEvent(name, event);
+        break;
+      }
+      case 'nh3': { // 氨氮
+        this._nh3layer.onEvent(name, event);
+        break;
+      }
+      case 'door': { // 截污拍门
+        this._doorlayer.onEvent(name, event);
+        break;
+      }
+      case 'cod': { // COD
+        this._codLayer.onEvent(name, event);
+        break;
+      }
+      case 'speed': { // 流速仪
+        this._speedlayer.onEvent(name, event);
+        break;
+      }
+      case 'flow': { // 流量计
+        this._flowlayer.onEvent(name, event);
+        break;
+      }
+      case 'well': { // 井盖
+        this._welllayer.onEvent(name, event);
+        break;
+      }
+      case 'ph': { //ph计
+        this._phlayer.onEvent(name, event);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /** 私有方法 **/
+  /**
+   * 初始化图层
+   */
+  _initLayers() {
+    const map = this._map;
+    const minZoom = this._minzoom;
+
+    // 液位计图层
+    this._liquidLayer = new EquipLiquidLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._liquidSourceId
+    });
+
+    // 泵站图层
+    this._pumpLayer = new EquipPumpLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._pumpSourceId
+    });
+
+    // 雨量计图层
+    this._raingaugeLayer = new EquipRaingaugeLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._raingaugeSourceId
+    });
+
+    // 易涝点
+    this._floodedLayer = new EquipFloodedLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._floodedSourceId
+    });
+
+    // 其他设备
+    this._otherLayer = new EquipOtherLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._otherSourceId
+    });
+
+    // 淤塞溢流图层
+    this._overflowLayer = new OverflowLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._overflowSourceId
+    });
+
+     // 氨氮图层
+     this._nh3layer = new EquipNh3Layer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._nh3SourceId
+    });
+
+     // 截污拍门图层
+     this._doorlayer = new EquipDoorLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._doorSourceId
+    });
+
+     // COD图层
+     this._codLayer = new EquipCODLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._codSourceId
+    });
+
+     // 流速仪图层
+     this._speedlayer = new EquipSpeedLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._speedSourceId
+    });
+
+     // 流量计图层
+     this._flowlayer = new EquipFlowLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._flowSourceId
+    });
+
+     // 智能井盖图层
+     this._welllayer = new EquipWellLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._wellSourceId
+    });
+
+     // pH计图层
+     this._phlayer = new EquippHLayer({
+      map: map,
+      minzoom: minZoom,
+      sourceId: this._phSourceId
+    });
+  }
+}

package/mapboxgl/js/equipment/EquippHLayer.js

@@ -0,0 +1,119 @@
+import DataUtils from '../utils/DataUtils';
+import EquipmentLayer from './EquipmentLayer';
+
+/**
+ * 定义pH计点图层类
+ *
+ * @alias EquippHLayer
+ *
+ * @summary <用于加载其他设备点位图层>
+ */
+export default class EquippHLayer {
+  /**
+   * 构造函数
+   * @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_equipment_ph');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 初始化图层
+    this._equipLayer = new EquipmentLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      icon: {
+        type: 'categorical',
+        property: 'equState',
+        stops: [
+          [1, 'equip_ph-green'],
+          [12, 'equip_ph-orange'],
+          [13, 'equip_ph-red'],
+          [0, 'equip_ph-grey'],
+        ],
+        default: 'equip_ph-green'
+      },
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置设备点数据
+   * @param {Object|Array} data -GeoJson要素/要素集/数组
+   */
+   setData(data) {
+    // 设置数据
+    this._equipLayer.setData(data);
+  }
+
+  /**
+   * 设置过滤器
+   * @param {Array} filter -过滤器
+   */
+  setFilter(filter) {
+    this._equipLayer.setFilter(filter);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示
+   */
+  showLayer(isShow) {
+    this._equipLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._equipLayer.hasLayer();
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._equipLayer.removeLayer();
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  onClick(event) {
+    this._equipLayer.onClick(event);
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  onEvent(name, event) {
+    this._equipLayer.onEvent(name, event);
+  }
+}