csk-gis-frame-work 4.0.0

package/mapboxgl/js/equipment/EquipRaingaugeLayer.js

@@ -0,0 +1,116 @@
+import DataUtils from '../utils/DataUtils';
+import EquipmentLayer from './EquipmentLayer';
+
+/**
+ * 定义雨量计点图层类
+ *
+ * @alias EquipRaingaugeLayer
+ *
+ * @summary <用于加载雨量计点位图层>
+ */
+export default class EquipRaingaugeLayer {
+  /**
+   * 构造函数
+   * @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_raingauge');
+
+    /**
+     * 图层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: 'status',
+        stops: [
+          [0, 'equip_gauge-fault'],
+          [1, 'equip_gauge']
+        ],
+        default: 'equip_gauge'
+      },
+      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/EquipSpeedLayer.js

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

@@ -0,0 +1,119 @@
+import DataUtils from '../utils/DataUtils';
+import EquipmentLayer from './EquipmentLayer';
+
+/**
+ * 定义智能井盖图层类
+ *
+ * @alias EquipWellLayer
+ *
+ * @summary <用于加载智能井盖图层>
+ */
+export default class EquipWellLayer {
+  /**
+   * 构造函数
+   * @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_well');
+
+    /**
+     * 图层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_well-green'],
+          [12, 'equip_well-orange'],
+          [13, 'equip_well-red'],
+          [0, 'equip_well-grey'],
+        ],
+        default: 'equip_well-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/EquipmentLayer.js

@@ -0,0 +1,116 @@
+import DataUtils from '../utils/DataUtils';
+import SimpleMarkerLayer from '../common/SimpleMarkerLayer';
+
+/**
+ * 定义设备点图层类
+ *
+ * @alias EquipmentLayer
+ *
+ * @summary <用于加载设备点位图层>
+ */
+export default class EquipmentLayer {
+  /**
+   * 构造函数
+   * @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, 'liquid');
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_equipment');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 初始化图层
+    this._markerLayer = new SimpleMarkerLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      icon: this._icon,
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置设备点数据
+   * @param {Object|Array} data -GeoJson要素/要素集/数组
+   */
+  setData(data) {
+    this._markerLayer.setData(data);
+  }
+
+  /**
+   * 设置过滤器
+   * @param {Array} filter -过滤器
+   */
+  setFilter(filter) {
+    this._markerLayer.setFilter(filter);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示
+   */
+  showLayer(isShow) {
+    this._markerLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._markerLayer.hasLayer();
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._markerLayer.removeLayer();
+    // 移除数据源
+    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);
+  }
+}