csk-gis-frame-work 4.0.0

package/mapboxgl/js/equipment/EquipFlowLayer.js

@@ -0,0 +1,119 @@
+import DataUtils from '../utils/DataUtils';
+import EquipmentLayer from './EquipmentLayer';
+
+/**
+ * 定义流量计图层类
+ *
+ * @alias EquipFlowLayer
+ *
+ * @summary <用于加载流量计图层>
+ */
+export default class EquipFlowLayer {
+  /**
+   * 构造函数
+   * @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_flow');
+
+    /**
+     * 图层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_flow-green'],
+          [12, 'equip_flow-orange'],
+          [13, 'equip_flow-red'],
+          [0, 'equip_flow-grey'],
+        ],
+        default: 'equip_flow-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);
+  }
+}

package/mapboxgl/js/equipment/EquipFlowingLayer.js

@@ -0,0 +1,103 @@
+import DataUtils from "../utils/DataUtils";
+import LayerProvider from "../geog/LayerProvider";
+import GeoJsonProvider from "../geog/GeoJsonProvider";
+import FlowingLayer from "../common/FlowingLayer";
+import PipenetFlowingLayer from "../pipenet/PipenetFlowingLayer";
+
+import { pipenetMergeAnalystResult } from "../utils/PipenetUtils";
+import { getApi } from "../../api/http";
+
+/**
+ * 定义设备流向图层
+ * @alias FlowingLayer
+ *
+ * @summary <用于设备流向数据加载>
+ */
+export default class EquipFlowingLayer {
+  /**
+   * 构造函数
+   * @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, '#2E8B57');
+
+    /**
+     * 线宽
+     * @type {Number}
+     */
+    this._lineWidth = DataUtils.default(options.width, 3.75);
+
+    /**
+     * 是否固定(线宽)
+     * @type {Boolean}
+     */
+    this._fixed = DataUtils.default(options.fixed, true);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipenet_flowing_equ');
+
+    // 动态流向图层
+    //this._flowingLayer = new FlowingLayer({
+    this._flowingLayer = new  PipenetFlowingLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      color: this._lineColor,
+      width: this._lineWidth,
+      fixed: this._fixed,
+      sourceId: this._sourceId
+    });
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   */
+  setData() {
+    const fc = GeoJsonProvider.getEmptyFC();
+
+    const url = LayerProvider.getBaseLayerQueryUrl(this._map, 'pipenet-equ');
+    if (!url) {
+      this._flowingLayer.setData(fc);
+      return;
+    }
+
+    // 获取地图服务接口
+    getApi(url).then((res) => {
+      if (res && res.data) {
+        fc.features = res.data.features;
+        // 合并管线数据
+        fc.features = pipenetMergeAnalystResult(fc.features);
+      }
+
+      // 设置流向数据
+      this._flowingLayer.setData(fc);
+      this._flowingLayer.start();
+    });
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._flowingLayer.removeLayer();
+  }
+}

package/mapboxgl/js/equipment/EquipLiquidLayer.js

@@ -0,0 +1,121 @@
+import DataUtils from '../utils/DataUtils';
+import EquipmentLayer from './EquipmentLayer';
+
+/**
+ * 定义液位计设备点图层类
+ *
+ * @alias EquipLiquidLayer
+ *
+ * @summary <用于加载液位计设备点位图层>
+ */
+export default class EquipLiquidLayer {
+  /**
+   * 构造函数
+   * @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_liquid');
+
+    /**
+     * 图层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_liquid-fault'],
+          [0, 'equip_liquid-grey'],
+          [1, 'equip_liquid-green'],
+          [11, 'equip_liquid-green'],
+          [12, 'equip_liquid-orange'],
+          [13, 'equip_liquid-red']
+        ],
+        default: 'equip_liquid-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);
+  }
+}

package/mapboxgl/js/equipment/EquipNh3Layer.js

@@ -0,0 +1,119 @@
+import DataUtils from '../utils/DataUtils';
+import EquipmentLayer from './EquipmentLayer';
+
+/**
+ * 定义氨氮图层类
+ *
+ * @alias EquipNh3Layer
+ *
+ * @summary <用于加载氨氮图层>
+ */
+export default class EquipNh3Layer {
+  /**
+   * 构造函数
+   * @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_nh3');
+
+    /**
+     * 图层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_nh3-green'],
+          [12, 'equip_nh3-orange'],
+          [13, 'equip_nh3-red'],
+          [0, 'equip_nh3-grey'],
+        ],
+        default: 'equip_nh3-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);
+  }
+}

package/mapboxgl/js/equipment/EquipOtherLayer.js

@@ -0,0 +1,123 @@
+import DataUtils from '../utils/DataUtils';
+import EquipmentLayer from './EquipmentLayer';
+
+/**
+ * 定义其他设备点图层类
+ *
+ * @alias EquipOtherLayer
+ *
+ * @summary <用于加载其他设备点位图层>
+ */
+export default class EquipOtherLayer {
+  /**
+   * 构造函数
+   * @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_other');
+
+    /**
+     * 图层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: 'typePresetTag',
+        stops: [
+          ['flowMeter', 'equip_other-flow'],
+          ['phMeter', 'equip_other-ph'],
+          ['codMeter', 'equip_other-cod'],
+          ['nh3nMeter', 'equip_other-nh3'],
+          ['tpMeter', 'equip_other-tp'],
+          ['tnMeter', 'equip_other-tn'],
+          ['ssMeter', 'equip_other-ss'],
+          ['wellLid', 'equip_other-well'],
+        ],
+        default: 'busi_result'
+      },
+      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);
+  }
+}

package/mapboxgl/js/equipment/EquipPumpLayer.js

@@ -0,0 +1,119 @@
+import DataUtils from '../utils/DataUtils';
+import EquipmentLayer from './EquipmentLayer';
+
+/**
+ * 定义泵站设备点图层类
+ *
+ * @alias EquipPumpLayer
+ *
+ * @summary <用于加载泵站设备点位图层>
+ */
+export default class EquipPumpLayer {
+  /**
+   * 构造函数
+   * @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_pump');
+
+    /**
+     * 图层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_sump-green'],
+          [12, 'equip_sump-orange'],
+          [13, 'equip_sump-red'],
+          [0, 'equip_sump-grey'],
+        ],
+        default: 'equip_sump-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);
+  }
+}