csk-gis-frame-work 4.0.0

package/mapboxgl/js/plant/PumpLayer.js

@@ -0,0 +1,166 @@
+import DataUtils from '../utils/DataUtils';
+import SimpleMarkerLayer from '../common/SimpleMarkerLayer';
+
+/**
+ * 定义泵站图层
+ *
+ * @alias PumpLayer
+ *
+ * @summary <用于加载泵站点位图层>
+ */
+export default class PumpLayer {
+  /**
+   * 构造函数
+   * @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, 'pump');
+
+    /**
+     * 字段名
+     * @type {String}
+     */
+    this._field = DataUtils.default(options.field, undefined);
+
+    /**
+     * 文字大小
+     * @type {Number}
+     */
+    this._textSize = DataUtils.default(options.textSize, 12);
+
+    /**
+     * 文本偏移
+     * @type {Array}
+     */
+    this._textOffset = DataUtils.default(options.textOffset, [0, 1.35]);
+
+    /**
+     * 过滤条件数组
+     * @type {Array}
+     */
+    this._filter = DataUtils.default(options.filter, undefined);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_pumpstation');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 创建标记图层
+    this._markerLayer = new SimpleMarkerLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      icon: this._icon,
+      field: this._field,
+      textSize: this._textSize,
+      textOffset: this._textOffset,
+      filter: this._filter,
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+
+  /**
+   * 设置数据
+   * @param {Array|Object|String} data -数据/过滤条件
+   */
+  setData(data = null) {
+    // 加载图层
+    this.loadLayer();
+
+    if (data) {
+      this._markerLayer.setData(data);
+    }
+  }
+
+  /**
+   * 设置过滤器
+   * @param {Array} filter -过滤器
+   */
+  setFilter(filter) {
+    this._markerLayer.setFilter(filter);
+  }
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this._markerLayer.loadLayer();
+    }
+
+    // 显示图层
+    this.showLayer(true);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示
+   */
+  showLayer(isShow) {
+    this._markerLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._markerLayer.hasLayer();
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._markerLayer.removeLayer();
+  }
+
+  /**
+   * 移除数据源
+   */
+  removeSource() {
+    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);
+  }
+}

package/mapboxgl/js/plant/RuralSewageLayer.js

@@ -0,0 +1,166 @@
+import DataUtils from "../utils/DataUtils";
+import SimpleMarkerLayer from '../common/SimpleMarkerLayer';
+
+/**
+ * 定义农污图层
+ *
+ * @alias RuralSewageLayer
+ *
+ * @summary <用于加载农污点位图层>
+ */
+export default class RuralSewageLayer {
+  /**
+   * 构造函数
+   * @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, 'rural_sew');
+
+    /**
+     * 字段名
+     * @type {String}
+     */
+    this._field = DataUtils.default(options.field, undefined);
+
+    /**
+     * 文字大小
+     * @type {Number}
+     */
+    this._textSize = DataUtils.default(options.textSize, 11);
+
+    /**
+     * 文本偏移
+     * @type {Array}
+     */
+    this._textOffset = DataUtils.default(options.textOffset, [0, 1.5]);
+
+    /**
+     * 过滤条件数组
+     * @type {Array}
+     */
+    this._filter = DataUtils.default(options.filter, undefined);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_ruralsewage');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 创建标记图层
+    this._markerLayer = new SimpleMarkerLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      icon: this._icon,
+      field: this._field,
+      textSize: this._textSize,
+      textOffset: this._textOffset,
+      filter: this._filter,
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+
+  /**
+   * 设置数据
+   * @param {Array|Object|String} data -数据/过滤条件
+   */
+  setData(data = null) {
+    // 加载图层
+    this.loadLayer();
+
+    if (data) {
+      this._markerLayer.setData(data);
+    }
+  }
+
+  /**
+   * 设置过滤器
+   * @param {Array} filter -过滤器
+   */
+  setFilter(filter) {
+    this._markerLayer.setFilter(filter);
+  }
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this._markerLayer.loadLayer();
+    }
+
+    // 显示图层
+    this.showLayer(true);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示
+   */
+  showLayer(isShow) {
+    this._markerLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._markerLayer.hasLayer();
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._markerLayer.removeLayer();
+  }
+
+  /**
+   * 移除数据源
+   */
+  removeSource() {
+    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);
+  }
+}

package/mapboxgl/js/plant/ServiceRangeLayer.js

@@ -0,0 +1,130 @@
+import DataUtils from '../utils/DataUtils';
+import SimpleFillLayer from '../common/SimpleFillLayer';
+
+/**
+ * 定义厂站纳污范围图层
+ *
+ * @alias ServiceRangeLayer
+ *
+ * @summary <用于加载厂站纳污范围图层>
+ */
+export default class ServiceRangeLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /**
+     * 填充颜色
+     * @type {String}
+     */
+    this._fillColor = DataUtils.default(options.color, '#4682B4');
+
+    /**
+     * 边框颜色
+     * @type {String}
+     */
+    this._lineColor = DataUtils.default(options.lineColor, this._fillColor);
+
+    /**
+     * 填充不透明度
+     * @type {Number}
+     */
+    this._fillOpacity = DataUtils.default(options.opacity, 0.25);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_pollution_range');
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 创建填充图层
+    this._fillLayer = new SimpleFillLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      color: this._fillColor,
+      opacity: this._fillOpacity,
+      outline: true,
+      lineColor: this._lineColor,
+      lineOpacity: 0.75,
+      sourceId: this._sourceId
+    });
+  }
+
+  /**
+   * 设置数据
+   * @param {Array|Object|String} data -数据/过滤条件
+   */
+  setData(data = null) {
+    // 加载图层
+    this.loadLayer();
+
+    if (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} isShow -是否显示
+   */
+  showLayer(isShow) {
+    this._fillLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._fillLayer.hasLayer();
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._fillLayer.removeLayer();
+    // 移除数据源
+    this._fillLayer.removeSource();
+  }
+}

package/mapboxgl/js/plant/VideoProvider.js

@@ -0,0 +1,145 @@
+import DataUtils from '../utils/DataUtils';
+import VerifyUtils from '../utils/VerifyUtils';
+import VideoLayer from '../common/VideoLayer';
+
+import { getApi } from '../../api/http';
+
+/**
+ * 定义厂站农污绑定的视频提供类
+ *
+ * @alias VideoProvider
+ */
+ export default class VideoProvider {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    // 视频图层对象
+    this._videoLayer = new VideoLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      sourceId: 'pipe_facility_video'
+    });
+  }
+
+  /**
+   * 设置数据
+   * @param {Array|Object} data -数据
+   * @param {String} gisType -设备类型字符串(,分隔)
+   */
+  setData(data, gisType) {
+    if (!data || !gisType) return;
+
+    const map = this._map;
+    const videoLayer = this._videoLayer;
+
+    // 查询地图服务
+    let source = map.getSource(videoLayer._defaultSourceId);
+    if (!source) return;
+
+    // 字符串转sql语句字符串
+    let queryStr = str2Str(gisType);
+
+    // 构造查询语句
+    let url = source._data + "&cql_filter=gis_type in (" + queryStr + ")";
+    let datas = data;
+
+    if (VerifyUtils.isObject(data)) {
+      url += " and gis_code='" + data.gisCode + "'";
+      datas = [data];
+    }
+
+    // 获取地图服务接口数据
+    getApi(url).then((res) => {
+      const fc = res.data;
+      // 循环更新属性值
+      for (let i = 0; i < fc.features.length; i++) {
+        let feature = fc.features[i];
+        let gtype = feature.properties.gis_type;
+        let gcode = feature.properties.gis_code;
+
+        // 过滤数据
+        let arr = filterData(gtype, gcode);
+        if (arr.length > 0) {
+          feature.properties.video_id = arr[0].videoId;
+        }
+      }
+
+      // 设置视频数据
+      videoLayer.setData(fc);
+    });
+
+    /**
+     * 字符串转SQL字符串("" => "''")
+     */
+    function str2Str(str) {
+      let strStr = '';
+
+      let arr = str.split(',');
+      arr.forEach((item) => {
+        strStr += "'" + item.toString() + "',";
+      });
+      if (strStr.length > 1) {
+        strStr = strStr.substring(0, strStr.length - 1);
+      }
+
+      return strStr;
+    }
+
+    /**
+     * 过滤数据
+     */
+    function filterData(gtype, gcode) {
+      return datas.filter((item) => {
+        return item.gisType === gtype && item.gisCode == gcode;
+      });
+    }
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._videoLayer.removeLayer();
+    // 移除数据源
+    this._videoLayer.removeSource();
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param isShow -是否显示
+   */
+  showLayer(isShow) {
+    this._videoLayer.showLayer(isShow)
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._videoLayer.hasLayer();
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  bindClickEvent(event) {
+    this._videoLayer.onClick(event);
+  }
+}