csk-gis-frame-work 4.0.0

package/mapboxgl/js/pipe/DrainageAreaLayer.js

@@ -0,0 +1,272 @@
+import DataUtils from '../utils/DataUtils';
+import VerifyUtils from '../utils/VerifyUtils';
+import MapProvider from '../geog/MapProvider';
+import LayerProvider from '../geog/LayerProvider';
+import GeoJsonProvider from '../geog/GeoJsonProvider';
+import AnnotationLayer from '../common/AnnotationLayer';
+import SimpleFillLayer from '../common/SimpleFillLayer';
+
+/**
+ * 定义排水分区图层
+ *
+ * @alias DrainageAreaLayer
+ *
+ * @summary <用于加载排水分区图层>
+ */
+export default class DrainageAreaLayer {
+  /**
+   * 构造函数
+   * @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|Object}
+     */
+    this._color = DataUtils.default(options.color, '#4AAA77');
+
+    /**
+     * 字段
+     * @type {String|Object}
+     */
+    this._field = DataUtils.default(options.field, 'name');
+
+    /**
+     * 文本大小
+     * @type {Number}
+     */
+    this._textSize = DataUtils.default(options.textSize, 15);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_drainage_area');
+    this._labelSourceId = this._sourceId + '-label';
+
+    // 图层ID
+    this._layerId = this._sourceId;
+    this._labelLayerId = this._labelSourceId;
+
+    // 图层对象
+    this._fillLayer = null;  // 填充图层
+    this._labelLayer = null; // 标注图层
+    // 初始化图层
+    this._initLayers();
+
+    // 事件
+    this._enterEvent = null;
+    this._leaveEvent = null;
+    this._clickEvent = null; // 外部实现单击事件
+    // 初始化鼠标事件
+    this._initEvent();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置分区数据
+   * @param {Object} data -GeoJSON要素集
+   */
+  setData(data) {
+    if (!this.hasLayer()) {
+      this.loadLayer();
+    }
+
+    const areaFC = GeoJsonProvider.getEmptyFC();
+    const labelFC = GeoJsonProvider.getEmptyFC();
+
+    if (!VerifyUtils.isGeoJsonFC(data)) {
+      this._fillLayer.setData(areaFC);
+      this._labelLayer.setData(labelFC);
+
+      return;
+    }
+
+    if (data.features && data.features.length > 0) {
+      areaFC.features = data.features;
+
+      // 过滤字段为空的要素
+      labelFC.features = data.features.filter((fea) => {
+        return fea.properties[this._field] ? true : false;
+      });
+      // 获取标注点要素集合
+      labelFC.features = labelFC.features.map((fea) => {
+        const lonLat = [fea.properties.lon, fea.properties.lat];
+        const properties = fea.properties;
+
+        return GeoJsonProvider.getPointFeature(lonLat, properties);
+      });
+    }
+
+    this._fillLayer.setData(areaFC);
+    this._labelLayer.setData(labelFC);
+  }
+
+  /**
+   * 设置过滤器
+   * @param {Array} filter -过滤器
+   */
+  setFilter(filter) {
+    this._fillLayer.setFilter(filter);
+    this._labelLayer.setFilter(filter);
+  }
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this._fillLayer.loadLayer();
+      this._labelLayer.loadLayer();
+    }
+
+    // 显示图层
+    this.showLayer(true);
+
+    // 绑定事件
+    this._onEvent();
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示
+   */
+  showLayer(isShow) {
+    this._fillLayer.showLayer(isShow);
+    this._labelLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return (
+      this._fillLayer.hasLayer() &&
+      this._labelLayer.hasLayer()
+    );
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._offEvent();
+
+    this._labelLayer.removeLayer();
+    this._fillLayer.removeLayer();
+
+    this._labelLayer.removeSource();
+    this._fillLayer.removeSource();
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  onClick(event) {
+    //this._fillLayer.onClick(event);
+    this._clickEvent = event;
+    if (this.hasLayer()) {
+      LayerProvider.onEvent(this._map, this._labelLayerId, 'click', event);
+    }
+  }
+
+  /** 私有方法 **/
+  /**
+   * 初始化图层
+   */
+  _initLayers() {
+    const map = this._map;
+
+    // 填充图层
+    this._fillLayer = new SimpleFillLayer({
+      map: map,
+      minzoom: this._minzoom,
+      color: this._color,
+      opacity: 0.25,
+      outline: true,
+      lineColor: '#4682B4',
+      lineWidth: 1.5,
+      lineOpacity: 0.2,
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+
+    // 标注图层
+    this._labelLayer = new AnnotationLayer({
+      map: map,
+      minzoom: this._minzoom_label,
+      field: this._field,
+      textSize: this._textSize,
+      sourceId: this._labelSourceId,
+      layerId: this._labelLayerId
+    });
+  }
+
+  /**
+   * 初始化事件
+   */
+  _initEvent() {
+    const map = this._map;
+
+    // 移入事件
+    this._enterEvent = (e) => {
+      MapProvider.setCursor(map, 'pointer');
+    }
+    // 移出事件
+    this._leaveEvent = (e) => {
+      MapProvider.setCursor(map);
+    }
+  }
+
+  /**
+   * 绑定事件
+   */
+  _onEvent() {
+    const map = this._map;
+    const layerId = this._labelLayerId;
+
+    LayerProvider.onEvent(map, layerId, 'mouseenter', this._enterEvent);
+    LayerProvider.onEvent(map, layerId, 'mouseleave', this._leaveEvent);
+    if (this._clickEvent) {
+      LayerProvider.onEvent(map, layerId, 'click', this._clickEvent);
+    }
+  }
+
+  /**
+   * 解除事件绑定
+   */
+  _offEvent() {
+    if (!this.hasLayer()) return;
+
+    const map = this._map;
+    const layerId = this._labelLayerId;
+
+    LayerProvider.offEvent(map, layerId, 'mouseenter', this._enterEvent);
+    LayerProvider.offEvent(map, layerId, 'mouseleave', this._leaveEvent);
+    if (this._clickEvent) {
+      LayerProvider.offEvent(map, layerId, 'click', this._clickEvent);
+    }
+  }
+}