csk-gis-frame-work 4.0.0

package/mapboxgl/js/drainer/DrainUnitLayer.js

@@ -0,0 +1,130 @@
+import DataUtils from '../utils/DataUtils';
+import SimpleFillLayer from '../common/SimpleFillLayer';
+
+/**
+ * 定义排水单元图层
+ *
+ * @alias DrainUnitLayer
+ *
+ * @summary <用于加载排水单元图层>
+ */
+export default class DrainUnitLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /**
+     * 填充不透明度
+     * @type {Number}
+     */
+    this._fillOpacity = DataUtils.default(options.opacity, 0.5);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_drainage_unit');
+
+    // 颜色表达式
+    const colorExpress = {
+      property: 'unit_type',
+      type: 'categorical',
+      stops: [
+        ['1', '#6DBB9B'],
+        ['2', '#F17992'],
+        ['3', '#F3F5BD'],
+        ['4', '#EEB74D'],
+        ['5', '#DAA2F8']
+      ],
+      default: '#EAEAEA'
+    };
+
+    // 创建图层
+    this._fillLayer = new SimpleFillLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      color: colorExpress,
+      opacity: this._fillOpacity,
+      /*outline: true,
+      lineColor: colorExpress,
+      lineWidth: 0.5,
+      lineOpacity: 0.75,
+      dasharray: [2.5, 1.5],*/
+      sourceId: this._sourceId,
+    });
+  }
+
+  /**
+   * 设置数据
+   * @param {Object} data -GeoJSON要素/要素集
+   */
+  setData(data) {
+    this._fillLayer.setData(data);
+  }
+
+  /**
+   * 设置筛选器
+   * @param {Array} filter -筛选器
+   */
+  setFilter(filter) {
+    this._fillLayer.setFilter(filter);
+  }
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this._fillLayer.loadLayer();
+    }
+
+    // 显示图层
+    this.showLayer(true);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} show -是否显示
+   */
+  showLayer(show) {
+    this._fillLayer.showLayer(show);
+  }
+
+  /**
+   * 判断是否已加载图层
+   * @param {String} type -类型
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._fillLayer.hasLayer();
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._fillLayer.removeLayer();
+  }
+
+  /**
+   * 移除数据源
+   */
+  removeSource() {
+    this._fillLayer.removeSource();
+  }
+}

package/mapboxgl/js/drainer/DrainageEntityLayer.js

@@ -0,0 +1,145 @@
+import DataUtils from '../utils/DataUtils';
+import IconProvider from "../geog/IconProvider";
+import ClusterLayer from '../common/ClusterLayer';
+import VerifyUtils from '../utils/VerifyUtils';
+
+/**
+ * 定义排水户聚合图层
+ *
+ * @alias DrainageEntityLayer
+ *
+ * @summary <用于加载排水户聚合图层>
+ */
+export default class DrainageEntityLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -排水户选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /**
+     * 聚合最大缩放层级
+     * @type {Number}
+     */
+    this._clusterMaxZoom = DataUtils.default(options.clusterMaxZoom, 14);
+
+    /**
+     * 聚合半径
+     * @type {Number}
+     */
+    this._clusterRadius = DataUtils.default(options.clusterRadius, 120);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_drainer_cluster');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 默认数据源ID
+    const defaultSourceId = 'pipe_drainage_entity';
+    // 获取数据源URL
+    const source = this._map.getSource(defaultSourceId);
+    const dataUrl = (source && VerifyUtils.isString(source._data)) ? source._data : null;
+    if (!dataUrl) {
+      this._sourceId = defaultSourceId;
+    }
+
+    // 初始化点聚合图层
+    this._clusterLayer = new ClusterLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      icon: IconProvider.getDrainerIconExpression('grade', true),
+      clusterMaxzoom: this._clusterMaxZoom,
+      clusterRadius: this._clusterRadius,
+      dataUrl: dataUrl,
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {Object|Array} data -GeoJSON要素集/点位数组
+   *
+   * @summary <data参数：
+   *   Object - GeoJson要素集
+   *   Array - 点位数组(包含longitude/lng, latitude/lat字段)
+   * >
+   */
+  setData(data) {
+    this._clusterLayer.setData(data);
+  }
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {
+    this._clusterLayer.loadLayer();
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} show -是否显示
+   */
+  showLayer(show) {
+    this._clusterLayer.showLayer(show);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._clusterLayer.hasLayer();
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._clusterLayer.removeLayer();
+  }
+
+  /**
+   * 移除数据源
+   */
+  removeSource() {
+    this._clusterLayer.removeSource();
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  onClick(event) {
+    this._clusterLayer.onClick(event);
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  onEvent(name, event) {
+    this._clusterLayer.onEvent(name, event);
+  }
+}

package/mapboxgl/js/drainer/DrainageEntityProvider.js

@@ -0,0 +1,222 @@
+import DataUtils from "../utils/DataUtils";
+import DrainUnitLayer from './DrainUnitLayer';
+import DrainageEntityLayer from "./DrainageEntityLayer";
+
+/**
+ * 定义排水户图层提供类
+ *
+ * @alias DrainageEntityProvider
+ *
+ * @summary <用于加载/移除排水户、排水单元图层>
+ */
+export default class DrainageEntityProvider {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /**
+     * 聚合最大缩放层级
+     * @type {Number}
+     */
+    this._clusterMaxZoom = DataUtils.default(options.clusterMaxZoom, 14);
+
+    /**
+     * 聚合半径
+     * @type {Number}
+     */
+    this._clusterRadius = DataUtils.default(options.clusterRadius, 120);
+
+    /* 图层对象 */
+    this._drainUnitLayer = null;   // 排水单元
+    this._drainEntityLayer = null; // 排水户
+
+    // 初始化图层
+    this._initLayers();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {String} type -类型
+   * @param {Array|Object} data -数据
+   */
+  setData(type, data = null) {
+    switch (type) {
+      case 'drainunit': { // 排水单元
+        this._drainUnitLayer.setData(data);
+        break;
+      }
+      case 'drainentity': { // 排水户
+        this._drainEntityLayer.setData(data);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 加载图层
+   * @param {String} type -类型
+   */
+  loadLayer(type) {
+    switch (type) {
+      case 'drainunit': { // 排水单元
+        this._drainUnitLayer.loadLayer();
+        break;
+      }
+      case 'drainentity': { // 排水户
+        this._drainEntityLayer.loadLayer();
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {String} type -类型
+   * @param {Boolean} show -是否显示图层
+   */
+  showLayer(type, show) {
+    switch (type) {
+      case 'drainunit': { // 排水单元
+        this._drainUnitLayer.showLayer(show);
+        break;
+      }
+      case 'drainentity': { // 排水户
+        this._drainEntityLayer.showLayer(show);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 判断是否已加载图层
+   * @param {String} type -类型
+   *
+   * @returns {Boolean}
+   */
+  hasLayer(type) {
+    switch (type) {
+      case 'drainunit': // 排水单元
+        return this._drainUnitLayer.hasLayer();
+      case 'drainentity': { // 排水户
+        return this._drainEntityLayer.hasLayer();
+      }
+      default:
+        return false;
+    }
+  }
+
+  /**
+   * 移除图层
+   * @param {String} type -类型
+   */
+  removeLayer(type) {
+    switch (type) {
+      case 'drainunit': { // 排水单元
+        this._drainUnitLayer.removeLayer();
+        break;
+      }
+      case 'drainentity': { // 排水户
+        this._drainEntityLayer.removeLayer();
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 移除所有图层(销毁时调用)
+   */
+  removeAllLayers() {
+    // 排水单元
+    this._drainUnitLayer.removeLayer();
+    this._drainUnitLayer.removeSource();
+
+    // 排水户
+    this._drainEntityLayer.removeLayer();
+    this._drainEntityLayer.removeSource();
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} type -设施类型
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  bindEvent(type, name, event) {
+    switch (type) {
+      case 'drainunit': { // 排水单元
+        break;
+      }
+      case 'drainentity': { // 排水户
+        this._drainEntityLayer.onEvent(name, event);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {String} type -设施类型
+   * @param {Function} event -事件函数
+   */
+  bindClickEvent(type, event) {
+    switch (type) {
+      case 'drainunit': { // 排水单元
+        break;
+      }
+      case 'drainentity': { // 排水户
+        this._drainEntityLayer.onClick(event);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /** 私有方法 **/
+  /**
+   * 初始化图层
+   */
+  _initLayers() {
+    const map = this._map;
+    const minZoom = this._minzoom;
+
+    // 排水单元
+    this._drainUnitLayer = new DrainUnitLayer({
+      map: map,
+      minzoom: minZoom,
+      opacity: 0.35
+    });
+
+    // 排水户
+    this._drainEntityLayer = new DrainageEntityLayer({
+      map: map,
+      minzoom: minZoom,
+      clusterMaxZoom: this._clusterMaxZoom,
+      clusterRadius: this._clusterRadius
+    });
+  }
+}

package/mapboxgl/js/drainer/DrainageUnitFlowLayer.js

@@ -0,0 +1,137 @@
+import DataUtils from '../utils/DataUtils';
+import SimpleMarkerLayer from '../common/SimpleMarkerLayer';
+
+/**
+ * 定义连接流向图层
+ *
+ * @alias DrainageUnitFlowLayer
+ *
+ * @summary <用于加载流向图层>
+ */
+ export default class DrainageUnitFlowLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 16);
+
+    /**
+     * 图标ID
+     * @type {String}
+     */
+     this._icon = DataUtils.default(options.icon, 'busi_arrow');
+
+    /**
+     * 过滤条件数组
+     * @type {Array}
+     */
+    this._filter = DataUtils.default(options.filter, undefined);
+
+    /**
+     * 数据源ID
+     * @typr {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_flow');
+
+    /**
+     * 图层ID
+     * @typr {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    /* 图层对象 */
+     // 流向图层
+     if (!this._flowLayer) {
+      this._flowLayer = new SimpleMarkerLayer({
+         map: this._map,
+         minzoom: this._minzoom,
+         icon: this._icon,
+         filter: this._filter,
+         sourceId: this._sourceId,
+         layerId: this._layerId
+       });
+        // 设置图标旋转的角度
+        this._flowLayer.setLayoutProperty('icon-rotate', ['get', 'bearing']);
+     }
+  }
+
+  /** 公有方法 **/
+   /**
+   * 设置数据
+   * @param {Array|Object} data -数据
+   */
+    setData(data = null) {
+        // 加载图层
+        this.loadLayer();
+        if (data) {
+          this._flowLayer.setData(data);
+        }
+      }
+
+
+
+  /**
+   * 设置筛选器
+   * @param {Array} filter -筛选器
+   */
+  setFilter(filter) {
+    this._flowLayer.setFilter(filter);
+  }
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this._flowLayer.loadLayer();
+    }
+
+    // 显示图层
+    this.showLayer(true);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示图层
+   */
+  showLayer(isShow) {
+    this._flowLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._flowLayer.hasLayer();
+  }
+
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._flowLayer.removeLayer();
+  }
+
+  /**
+   * 移除数据源
+   */
+  removeSource() {
+    this._flowLayer.removeSource();
+  }
+
+}