csk-gis-frame-work 4.0.0

package/mapboxgl/js/pipe/DrainagePointLayer.js

@@ -0,0 +1,258 @@
+import DataUtils from '../utils/DataUtils';
+import VerifyUtils from '../utils/VerifyUtils';
+import GeoJsonProvider from '../geog/GeoJsonProvider';
+import AnnotationLayer from '../common/AnnotationLayer';
+import SimpleCircleLayer from '../common/SimpleCircleLayer';
+import SimpleMarkerLayer from '../common/SimpleMarkerLayer';
+
+/**
+ * 定义排水分析点图层
+ *
+ * @alias DrainagePointLayer
+ *
+ * @summary <用于加载排水分析点图层>
+ */
+export default class DrainagePointLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /**
+     * 标注最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom_label = DataUtils.default(options.minzoom_label, 10);
+
+    /**
+     * 图标
+     * @type {String}
+     */
+    this._icon = DataUtils.default(options.icon, 'marker');
+
+    /**
+     * 圆颜色
+     * @type {String|Object}
+     */
+    this._color = DataUtils.default(options.color, '#4AAA77');
+
+    /**
+     * 字段
+     * @type {String|Object}
+     */
+    this._field = DataUtils.default(options.field, undefined);
+
+    /**
+     * 文本大小
+     * @type {Number}
+     */
+    this._textSize = DataUtils.default(options.textSize, 12);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_drainage_point');
+    this._labelSourceId = this._sourceId + '-label';
+
+    // 图层ID
+    this._markerLayerId = this._sourceId + '-station'; // 固定点
+    this._circleLayerId = this._sourceId + '-sample';  // 采样点
+    this._labelLayerId = this._labelSourceId; // 注记
+
+    // 图层对象
+    this._markerLayer = null; // 固定点
+    this._circleLayer = null; // 采样点
+    this._labelLayer = null;  // 注记
+    // 初始化图层
+    this._initLayers();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置分区数据
+   * @param {Object} data -GeoJSON要素集
+   */
+  setData(data) {
+    const pointFC = GeoJsonProvider.getEmptyFC();
+    const labelFC = GeoJsonProvider.getEmptyFC();
+
+    if (!VerifyUtils.isGeoJsonFC(data)) {
+      this._markerLayer.setData(pointFC);
+      this._circleLayer.setData(pointFC);
+      if (this._labelLayer) {
+        this._labelLayer.setData(labelFC);
+      }
+
+      return;
+    }
+
+    if (data.features && data.features.length > 0) {
+      pointFC.features = data.features;
+
+      if (this._labelLayer) {
+        // 获取标注点要素集合
+        labelFC.features = pointFC.features.map((fea) => {
+          const lonLat = [fea.properties.lon, fea.properties.lat];
+          const properties = fea.properties;
+
+          return GeoJsonProvider.getPointFeature(lonLat, properties);
+        });
+      }
+    }
+
+    this._markerLayer.setData(pointFC);
+    this._circleLayer.setData(pointFC);
+    if (this._labelLayer) {
+      this._labelLayer.setData(labelFC);
+    }
+  }
+
+  /**
+   * 设置过滤器
+   * @param {Array} filter -过滤器
+   */
+  setFilter(filter) {
+    this._markerLayer.setFilter(filter);
+    this._circleLayer.setFilter(filter);
+    if (this._labelLayer) {
+      this._labelLayer.setFilter(filter);
+    }
+  }
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this._markerLayer.loadLayer();
+      this._circleLayer.loadLayer();
+      if (this._labelLayer) {
+        this._labelLayer.loadLayer();
+      }
+    }
+
+    // 显示图层
+    this.showLayer(true);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示
+   */
+  showLayer(isShow) {
+    this._markerLayer.showLayer(isShow);
+    this._circleLayer.showLayer(isShow);
+    if (this._labelLayer) {
+      this._labelLayer.showLayer(isShow);
+    }
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return (
+      this._markerLayer.hasLayer() &&
+      this._circleLayer.hasLayer()
+    );
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    // 注记图层
+    if (this._labelLayer) {
+      this._labelLayer.removeLayer();
+      this._labelLayer.removeSource();
+    }
+
+    // 点图层
+    this._circleLayer.removeLayer();
+    this._markerLayer.removeLayer();
+
+    this._markerLayer.removeSource();
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  onClick(event) {
+    this._circleLayer.onClick(event);
+    this._markerLayer.onClick(event);
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  onEvent(name, event) {
+    this._circleLayer.onEvent(name, event);
+    this._markerLayer.onEvent(name, event);
+  }
+
+  /** 私有方法 **/
+  /**
+   * 初始化图层
+   */
+  _initLayers() {
+    const map = this._map;
+    const minZoom = this._minzoom;
+
+    // 固定点图层
+    this._markerLayer = new SimpleMarkerLayer({
+      map: map,
+      minzoom: minZoom,
+      icon: this._icon,
+      filter: ['==', 'analysisType', 1],
+      sourceId: this._sourceId,
+      layerId: this._markerLayerId
+    });
+
+    // 采样点图层
+    this._circleLayer = new SimpleCircleLayer({
+      map: map,
+      minzoom: minZoom,
+      color: this._color,
+      radius: 5,
+      maxRadius: 10,
+      outline: true,
+      lineColor: '#646C7D',
+      lineWidth: 0.5,
+      filter: ['==', 'analysisType', 2],
+      sourceId: this._sourceId,
+      layerId: this._circleLayerId
+    });
+
+    if (this._field) {
+      // 标注图层
+      this._labelLayer = new AnnotationLayer({
+        map: map,
+        minzoom: this._minzoom_label,
+        field: this._field,
+        textSize: this._textSize,
+        textOffset: [0, -3.0],
+        sourceId: this._labelSourceId,
+        layerId: this._labelLayerId
+      });
+    }
+  }
+}