csk-gis-frame-work 4.0.0

package/mapboxgl/js/equipment/OverflowLayer.js

@@ -0,0 +1,167 @@
+import DataUtils from '../utils/DataUtils';
+import IconProvider from '../geog/IconProvider';
+import PulserLayer from "../common/PulserLayer";
+
+/**
+ * 定义淤塞溢流点图层类
+ *
+ * @alias OverflowLayer
+ *
+ * @summary <用于加载淤塞溢流点位图层>
+ */
+export default class OverflowLayer {
+  /**
+   * 构造函数
+   * @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_overflow');
+
+    /**
+      * 图层ID
+      * @type {String}
+      */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 脉冲图标
+    this._alertPulserIcon = 'icon_pulsing-alert';
+    this._warnPulserIcon = 'icon_pulsing-warn';
+    this._alarmPulserIcon = 'icon_pulsing-alarm';
+
+    // 图层对象
+    this._pulserLayer = null;
+    // 初始化图层
+    this._initLayer();
+  }
+
+  /**
+   * 设置数据
+   * @param {Array|Object} data -数据
+   */
+  setData(data) {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this._pulserLayer.loadLayer();
+    }
+
+    if (data) {
+      this._pulserLayer.setData(data);
+    }
+
+    // 显示图层
+    this.showLayer(true);
+  }
+
+  /**
+   * 设置筛选器
+   * @param {Array} filter -筛选器
+   */
+  setFilter(filter) {
+    if (!this.hasLayer()) return;
+
+    this._pulserLayer.setFilter(filter);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示
+   */
+  showLayer(isShow) {
+    this._pulserLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._pulserLayer.hasLayer();
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._pulserLayer.removeLayer();
+
+    // 移除脉冲图标
+    IconProvider.removeIcon(map, this._alertPulserIcon);
+    IconProvider.removeIcon(map, this._warnPulserIcon);
+    IconProvider.removeIcon(map, this._alarmPulserIcon);
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  onClick(event) {
+    this._pulserLayer.onClick(event);
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  onEvent(name, event) {
+    this._pulserLayer.onEvent(name, event);
+  }
+
+  /** 私有方法 **/
+  /**
+   * 初始化图层
+   */
+  _initLayer() {
+    const map = this._map;
+
+    // 添加脉冲图标
+    IconProvider.loadPulserIcon(map, this._alertPulserIcon, 30, [255,225,25], [255,245,50]);
+    IconProvider.loadPulserIcon(map, this._warnPulserIcon, 30, [255,125,25], [255,155,50]);
+    IconProvider.loadPulserIcon(map, this._alarmPulserIcon, 30, [255,45,25], [255,65,50]);
+
+    // 创建脉冲图层
+    this._pulserLayer = new PulserLayer({
+      map: map,
+      minzoom: this._minzoom,
+      icon: {
+        type: "categorical",
+        property: "type",
+        stops: [
+          [1, "clock_alert"],
+          [2, "clock_warn"],
+          [3, "clock_alarm"]
+        ],
+        default: "clock_alert"
+      },
+      pulserIcon: {
+        type: "categorical",
+        property: "type",
+        stops: [
+          [1, this._alertPulserIcon],
+          [2, this._warnPulserIcon],
+          [3, this._alarmPulserIcon]
+        ],
+        default: this._alertPulserIcon
+      },
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+}

package/mapboxgl/js/equipment/WarnLayer.js

@@ -0,0 +1,120 @@
+import DataUtils from "../utils/DataUtils";
+import PulserLayer from "../common/PulserLayer";
+
+/**
+ * 定义设施预警图层提供类
+ * @alias WarnLayer
+ *
+ * @summary <用于地图加载设备预警点位图层>
+ */
+export default class WarnLayer {
+  /**
+   * 构造函数
+   * @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_warn');
+
+    /**
+      * 图层ID
+      * @type {String}
+      */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 预警图层对象
+    this._pulserLayer = new PulserLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      icon: 'busi_warn',
+      innerColor: [255, 155, 25],
+      outerColor: [255, 165, 50],
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+
+  /**
+   * 设置预警数据
+   * @param {Array|Object} data -预警数据
+   */
+  setData(data) {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this._pulserLayer.loadLayer();
+    }
+
+    if (data) {
+      this._pulserLayer.setData(data);
+    }
+
+    // 显示图层
+    this.showLayer(true);
+  }
+
+  /**
+   * 设置筛选器
+   * @param {Array} filter -筛选器
+   */
+  setFilter(filter) {
+    if (!this.hasLayer()) return;
+
+    this._pulserLayer.setFilter(filter);
+  }
+
+  /**
+   * 显示/隐藏预警图层
+   * @param {Boolean} isShow -是否显示
+   */
+  showLayer(isShow) {
+    this._pulserLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._pulserLayer.hasLayer();
+  }
+
+  /**
+   * 移除预警图层
+   */
+  removeLayer() {
+    this._pulserLayer.removeLayer();
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  onClick(event) {
+    this._pulserLayer.onClick(event);
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  onEvent(name, event) {
+    this._pulserLayer.onEvent(name, event);
+  }
+}

package/mapboxgl/js/event/EventBranchPipeLayer.js

@@ -0,0 +1,108 @@
+import DataUtils from '../utils/DataUtils';
+import EventLayer from './EventLayer';
+
+/**
+ * 定义支管接入点图层类
+ *
+ * @alias EventBranchPipeLayer
+ *
+ * @summary <用于加载支管接入点图层>
+ */
+export default class EventBranchPipeLayer {
+  /**
+   * 构造函数
+   * @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_branchpipe');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 初始化图层
+    this._eventLayer = new EventLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      icon: 'ladle-shortpurple',
+      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/event/EventDefectLayer.js

@@ -0,0 +1,119 @@
+import DataUtils from '../utils/DataUtils';
+import EventLayer from './EventLayer';
+
+/**
+ * 定义管网缺陷点图层类
+ *
+ * @alias EventDefectLayer
+ *
+ * @summary <用于加载管网缺陷点图层>
+ */
+export default class EventDefectLayer {
+  /**
+   * 构造函数
+   * @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_defect');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 初始化图层
+    this._eventLayer = new EventLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      icon: {
+        type: 'categorical',
+        property: 'status',
+        stops: [
+          ['Finished', 'event_defect-green'],
+          ['Executed', 'event_defect-orange'],
+          ['UnAllocated', 'event_defect-red'],
+          ['ToBeExecuted', 'event_defect-red']
+        ],
+        default: 'event_defect-green'
+      },
+      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/event/EventDrainerLayer.js

@@ -0,0 +1,119 @@
+import DataUtils from '../utils/DataUtils';
+import EventLayer from './EventLayer';
+
+/**
+ * 定义排水户异常图层类
+ *
+ * @alias EventDrainerLayer
+ *
+ * @summary <用于加载排水户异常点图层>
+ */
+export default class EventDrainerLayer {
+  /**
+   * 构造函数
+   * @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_drainer');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 初始化图层
+    this._eventLayer = new EventLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      icon: {
+        type: 'categorical',
+        property: 'status',
+        stops: [
+          ['Finished', 'event_error-green'],
+          ['Executed', 'event_error-orange'],
+          ['UnAllocated', 'event_error-red'],
+          ['ToBeExecuted', 'event_error-red']
+        ],
+        default: 'event_error-green'
+      },
+      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);
+  }
+}