csk-gis-frame-work 4.0.0

package/mapboxgl/js/pipeline/PipenetProvider.js

@@ -0,0 +1,1042 @@
+import DataUtils from '../utils/DataUtils';
+import ManholeLayer from './ManholeLayer';
+import PipelineLayer from './PipelineLayer';
+import PipeflowLayer from './PipeflowLayer';
+
+/**
+ * 定义管网图层提供类
+ *
+ * @alias PipenetProvider
+ *
+ * @summary <用于加载管线、检查井图层>
+ */
+ export default class PipenetProvider {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /**
+     * 缓存的管网
+     * @type {Boolean}
+     */
+    this._cachedPipe = DataUtils.default(options.cachedPipe, false);
+
+    /**
+     * 线宽
+     * @type {Number}
+     */
+    this._width = DataUtils.default(options.width, 7.5);
+
+    // 管线数据源ID
+    this._pipelineSourceId = 'pipe_pipeline';
+    // 管线流向数据源ID
+    this._pipelineFlowSourceId = 'pipe_pipeline_flow';
+    // 检查井数据源ID
+    this._manholeSourceId = 'pipe_manhole';
+
+    /** 图层ID **/
+    // 雨水管线
+    this._rainLineLayerId = this._pipelineSourceId + '-rai';
+    // 污水管线
+    this._sewageLineLayerId = this._pipelineSourceId + '-sew';
+    // 工废管线
+    this._industryLineLayerId = this._pipelineSourceId + '-ind';
+
+    // 雨水管线流向
+    this._rainLineFlowLayerId = this._pipelineFlowSourceId + '-rai';
+    // 污水管线流向
+    this._sewageLineFlowLayerId = this._pipelineFlowSourceId + '-sew';
+    // 工废管线流向
+    this._industryLineFlowLayerId = this._pipelineFlowSourceId + '-ind';
+
+    // 雨水井
+    this._rainHoleLayerId = this._manholeSourceId + '-rai';
+    // 污水井
+    this._sewageHoleLayerId = this._manholeSourceId + '-sew';
+
+    // 工废井
+    this._industryHoleLayerId = this._manholeSourceId + '-ind';
+
+    /** 图层对象 **/
+    this._rainLineLayer = null; // 管线
+    this._sewageLineLayer = null;
+    this._industryLineLayer = null;
+
+    this._rainLineFlowLayer = null; // 管线流向
+    this._sewageLineFlowLayer = null;
+    this._industryLineFlowLayer = null;
+
+    this._rainHoleLayer = null; // 检查井
+    this._sewageHoleLayer = null;
+    this._industryHoleLayer = null;
+
+    // 初始化图层
+    this._initLayers();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {String} type -类型
+   * @param {Array|Object} data -数据
+   */
+  setData(type, data = null) {
+    switch (type) {
+      case 'piperain':
+      case 'pipelinerain': {
+        // 雨水管线
+        this._rainLineLayer.setData(data);
+        break;
+      }
+      case 'pipewaste':
+      case 'pipesewage':
+      case 'pipelinewaste':
+      case 'pipelinesewage': {
+        // 污水管线
+        this._sewageLineLayer.setData(data);
+        break;
+      }
+      case 'pipeindustry':
+      case 'pipelineindustry': {
+        // 工废管线
+        this._industryLineLayer.setData(data);
+        break;
+      }
+      case 'pipeflowrain': {
+        // 雨水管线流向
+        this._rainLineFlowLayer.setData(data);
+        break;
+      }
+      case 'pipeflowwaste':
+      case 'pipeflowsewage': {
+        // 污水管线流向
+        this._sewageLineFlowLayer.setData(data);
+        break;
+      }
+      case 'pipeflowindustry': {
+        // 工废管线流向
+        this._industryLineFlowLayer.setData(data);
+        break;
+      }
+      case 'wellrain':
+      case 'manholerain': {
+        // 雨水井
+        this._rainHoleLayer.setData(data);
+        break;
+      }
+      case 'wellwaste':
+      case 'wellsewage':
+      case 'manholewaste':
+      case 'manholesewage':  {
+        // 污水井
+        this._sewageHoleLayer.setData(data);
+        break;
+      }
+      case "wellindustry":
+      case "manholeindustry": {
+        // 工废井
+        this._industryHoleLayer.setData(data);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 设置筛选器
+   * @param {String} type -类型
+   * @param {Array} filter -筛选器
+   */
+  setFilter(type, filter) {
+    switch (type) {
+      case 'piperain':
+      case 'pipelinerain': {
+        // 雨水管线
+        this._rainLineLayer.setFilter(filter);
+        break;
+      }
+      case 'pipewaste':
+      case 'pipesewage':
+      case 'pipelinewaste':
+      case 'pipelinesewage': {
+        // 污水管线
+        this._sewageLineLayer.setFilter(filter);
+        break;
+      }
+      case 'pipeindustry':
+      case 'pipelineindustry': {
+        // 工废管线
+        this._industryLineLayer.setFilter(filter);
+        break;
+      }
+      case 'pipeline': { // 管线
+        this._rainLineLayer.setFilter(filter);     // 雨水管线
+        this._sewageLineLayer.setFilter(filter);   // 污水管线
+        this._industryLineLayer.setFilter(filter); // 工废管线
+        break;
+      }
+      case 'pipeflowrain': {
+        // 雨水管线流向
+        this._rainLineFlowLayer.setFilter(filter);
+        break;
+      }
+      case 'pipeflowwaste':
+      case 'pipeflowsewage': {
+        // 污水管线流向
+        this._sewageLineFlowLayer.setFilter(filter);
+        break;
+      }
+      case 'pipeflowindustry': {
+        // 工废管线流向
+        this._industryLineFlowLayer.setFilter(filter);
+        break;
+      }
+      case 'pipeflow': { // 管线流向
+        this._rainLineFlowLayer.setFilter(filter);
+        this._sewageLineFlowLayer.setFilter(filter);
+        this._industryLineFlowLayer.setFilter(filter);
+        break;
+      }
+      case 'wellrain':
+      case 'manholerain': {
+        // 雨水井
+        this._rainHoleLayer.setFilter(filter);
+        break;
+      }
+      case 'wellwaste':
+      case 'wellsewage':
+      case 'manholewaste':
+      case 'manholesewage':  {
+        // 污水井
+        this._sewageHoleLayer.setFilter(filter);
+        break;
+      }
+      case "wellindustry":
+      case "manholeindustry": {
+        // 工废井
+        this._industryHoleLayer.setFilter(filter);
+        break;
+      }
+      case 'manhole': { // 检查井
+        this._rainHoleLayer.setFilter(filter);   // 雨水井
+        this._sewageHoleLayer.setFilter(filter); // 污水井
+        this._industryHoleLayer.setFilter(filter); // 工废井
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 设置绘制属性
+   * @param {String} type -类型
+   * @param {String} name -属性名称
+   * @param {String|Object} value -属性值
+   */
+  setPaintProperty(type, name, value) {
+    switch (type) {
+      case 'piperain':
+      case 'pipelinerain': {
+        // 雨水管线
+        this._rainLineLayer.setPaintProperty(name, value);
+        break;
+      }
+      case 'pipewaste':
+      case 'pipesewage':
+      case 'pipelinewaste':
+      case 'pipelinesewage': {
+        // 污水管线
+        this._sewageLineLayer.setPaintProperty(name, value);
+        break;
+      }
+      case 'pipeindustry':
+      case 'pipelineindustry': {
+        // 工废管线
+        this._industryLineLayer.setPaintProperty(name, value);
+        break;
+      }
+      case 'pipeline': { // 管线
+        this._rainLineLayer.setPaintProperty(name, value);     // 雨水管线
+        this._sewageLineLayer.setPaintProperty(name, value);   // 污水管线
+        this._industryLineLayer.setPaintProperty(name, value); // 工废管线
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 设置布局属性
+   * @param {String} type -类型
+   * @param {String} name -属性名称
+   * @param {String|Object} value -属性值
+   */
+  setLayoutProperty(type, name, value) {
+    switch (type) {
+      case 'piperain':
+      case 'pipelinerain': {
+        // 雨水管线
+        this._rainLineLayer.setLayoutProperty(name, value);
+        break;
+      }
+      case 'pipewaste':
+      case 'pipesewage':
+      case 'pipelinewaste':
+      case 'pipelinesewage': {
+        // 污水管线
+        this._sewageLineLayer.setLayoutProperty(name, value);
+        break;
+      }
+      case 'pipeindustry':
+      case 'pipelineindustry': {
+        // 工废管线
+        this._industryLineLayer.setLayoutProperty(name, value);
+        break;
+      }
+      case 'pipeline': { // 管线
+        this._rainLineLayer.setLayoutProperty(name, value);     // 雨水管线
+        this._sewageLineLayer.setLayoutProperty(name, value);   // 污水管线
+        this._industryLineLayer.setLayoutProperty(name, value); // 工废管线
+        break;
+      }
+      case 'wellrain':
+      case 'manholerain': {
+        // 雨水井
+        this._rainHoleLayer.setLayoutProperty(name, value);
+        break;
+      }
+      case 'wellwaste':
+      case 'wellsewage':
+      case 'manholewaste':
+      case 'manholesewage':  {
+        // 污水井
+        this._sewageHoleLayer.setLayoutProperty(name, value);
+        break;
+      }
+      case "wellindustry":
+      case "manholeindustry": {
+        // 工废井
+        this._industryHoleLayer.setLayoutProperty(name, value);
+        break;
+      }
+      case 'manhole': { // 检查井
+        this._rainHoleLayer.setLayoutProperty(name, value);   // 雨水井
+        this._sewageHoleLayer.setLayoutProperty(name, value); // 污水井
+        this._industryHoleLayer.setLayoutProperty(name, value); // 工废井
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 重置管线宽度
+   * @param {String} type -类型
+   */
+  resetPipelineWidth(type) {
+    switch (type) {
+      case 'piperain':
+      case 'pipelinerain': {
+        // 雨水管线
+        this._rainLineLayer.resetLineWidth();
+        break;
+      }
+      case 'pipewaste':
+      case 'pipesewage':
+      case 'pipelinewaste':
+      case 'pipelinesewage': {
+        // 污水管线
+        this._sewageLineLayer.resetLineWidth();
+        break;
+      }
+      case 'pipeindustry':
+      case 'pipelineindustry': {
+        // 工废管线
+        this._industryLineLayer.resetLineWidth();
+        break;
+      }
+      case 'pipeline': { // 管线
+        this._rainLineLayer.resetLineWidth();     // 雨水管线
+        this._sewageLineLayer.resetLineWidth();   // 污水管线
+        this._industryLineLayer.resetLineWidth(); // 工废管线
+        break;
+      }
+      default:
+        return;
+    }
+  }
+
+  /**
+   * 加载图层
+   * @param {String} type -类型
+   */
+  loadLayer(type) {
+    switch (type) {
+      case 'piperain':
+      case 'pipelinerain': {
+        // 雨水管线
+        this._rainLineLayer.loadLayer();
+        // 雨水管线流向
+        this._rainLineFlowLayer.loadLayer();
+        break;
+      }
+      case 'pipewaste':
+      case 'pipesewage':
+      case 'pipelinewaste':
+      case 'pipelinesewage': {
+        // 污水管线
+        this._sewageLineLayer.loadLayer();
+        // 污水管线流向
+        this._sewageLineFlowLayer.loadLayer();
+        break;
+      }
+      case 'pipeindustry':
+      case 'pipelineindustry': {
+        // 工废管线
+        this._industryLineLayer.loadLayer();
+        // 工废管线流向
+        this._industryLineFlowLayer.loadLayer();
+        break;
+      }
+      case 'pipeline': { // 管线
+        this._rainLineLayer.loadLayer();     // 雨水管线
+        this._sewageLineLayer.loadLayer();   // 污水管线
+        this._industryLineLayer.loadLayer(); // 工废管线
+
+        // 管线流向
+        this._rainLineFlowLayer.loadLayer();
+        this._sewageLineFlowLayer.loadLayer();
+        this._industryLineFlowLayer.loadLayer();
+        break;
+      }
+      case 'wellrain':
+      case 'manholerain': {
+        // 雨水井
+        this._rainHoleLayer.loadLayer();
+        break;
+      }
+      case 'wellwaste':
+      case 'wellsewage':
+      case 'manholewaste':
+      case 'manholesewage':  {
+        // 污水井
+        this._sewageHoleLayer.loadLayer();
+        break;
+      }
+      case "wellindustry":
+      case "manholeindustry": {
+        // 工废井
+        this._industryHoleLayer.loadLayer();
+        break;
+      }
+      case 'manhole': { // 检查井
+        this._rainHoleLayer.loadLayer();   // 雨水井
+        this._sewageHoleLayer.loadLayer(); // 污水井
+        this._industryHoleLayer.loadLayer(); // 工废井
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 加载井标注图层
+   */
+  loadManholeLabelLayer() {
+    // 雨水井
+    if (this._rainHoleLayer.isVisible()) {
+      this._rainHoleLayer.loadLabelLayer();
+    }
+
+    // 污水井
+    if (this._sewageHoleLayer.isVisible()) {
+      this._sewageHoleLayer.loadLabelLayer();
+    }
+
+    // 工废井
+    if (this._industryHoleLayer.isVisible()) {
+      this._industryHoleLayer.loadLabelLayer();
+    }
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {String} type -类型
+   * @param {Boolean} isShow -是否显示图层
+   */
+  showLayer(type, isShow) {
+    switch (type) {
+      case 'piperain':
+      case 'pipelinerain': {
+        // 雨水管线
+        this._rainLineLayer.showLayer(isShow);
+        // 雨水管线流向
+        this._rainLineFlowLayer.showLayer(isShow);
+        break;
+      }
+      case 'pipesewage':
+      case 'pipelinewaste':
+      case 'pipelinesewage': {
+        // 污水管线
+        this._sewageLineLayer.showLayer(isShow);
+        // 污水管线流向
+        this._sewageLineFlowLayer.showLayer(isShow);
+        break;
+      }
+      case 'pipeindustry':
+      case 'pipelineindustry': {
+        // 工废管线
+        this._industryLineLayer.showLayer(isShow);
+        // 工废管线流向
+        this._industryLineFlowLayer.showLayer(isShow);
+        break;
+      }
+      case 'pipeline': { // 管线
+        this._rainLineLayer.showLayer(isShow);   // 雨水管线
+        this._sewageLineLayer.showLayer(isShow); // 污水管线
+        this._industryLineLayer.showLayer(isShow); // 工废管线
+
+        // 管线流向
+        this._rainLineFlowLayer.showLayer(isShow);
+        this._sewageLineFlowLayer.showLayer(isShow);
+        this._industryLineFlowLayer.showLayer(isShow);
+        break;
+      }
+      case 'wellrain':
+      case 'manholerain': {
+        // 雨水井
+        this._rainHoleLayer.showLayer(isShow);
+        break;
+      }
+      case 'wellsewage':
+      case 'manholewaste':
+      case 'manholesewage': {
+        // 污水井
+        this._sewageHoleLayer.showLayer(isShow);
+        break;
+      }
+      case "wellindustry":
+      case "manholeindustry": {
+        // 工废井
+        this._industryHoleLayer.showLayer(isShow);
+        break;
+      }
+      case "manhole": { // 检查井
+        this._rainHoleLayer.showLayer(isShow);   // 雨水井
+        this._sewageHoleLayer.showLayer(isShow); // 污水井
+        this._industryHoleLayer.showLayer(isShow); // 工废井
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 判断是否已加载图层
+   * @param {String} type -类型
+   *
+   * @returns {Boolean}
+   */
+  hasLayer(type) {
+    switch (type) {
+      case 'piperain':
+      case 'pipelinerain':
+        // 雨水管线
+        return this._rainLineLayer.hasLayer();
+      case 'pipesewage':
+      case 'pipelinewaste':
+      case 'pipelinesewage':
+        // 污水管线
+        return this._sewageLineLayer.hasLayer();
+      case 'pipeindustry':
+      case 'pipelineindustry':
+        // 工废管线
+        return this._industryLineLayer.hasLayer();
+      case 'wellrain':
+      case 'manholerain':
+        // 雨水井
+        return this._rainHoleLayer.hasLayer();
+      case 'wellsewage':
+      case 'manholewaste':
+      case 'manholesewage':
+        // 污水井
+        return this._sewageHoleLayer.hasLayer();
+      case "wellindustry":
+      case "manholeindustry":
+        // 工废井
+        return this._industryHoleLayer.hasLayer();
+      default:
+        return false;
+    }
+  }
+
+  /**
+   * 移除图层
+   * @param {String} type -类型
+   */
+  removeLayer(type) {
+    switch (type) {
+      case 'piperain':
+      case 'pipelinerain': {
+        // 雨水管线
+        this._rainLineLayer.removeLayer();
+        // 雨水管线流向
+        this._rainLineFlowLayer.removeLayer();
+        break;
+      }
+      case 'pipesewage':
+      case 'pipelinewaste':
+      case 'pipelinesewage': {
+        // 污水管线
+        this._sewageLineLayer.removeLayer();
+        // 污水管线流向
+        this._sewageLineFlowLayer.removeLayer();
+        break;
+      }
+      case 'pipeindustry':
+      case 'pipelineindustry': {
+        // 工废管线
+        this._industryLineLayer.removeLayer();
+        // 工废管线流向
+        this._industryLineFlowLayer.removeLayer();
+        break;
+      }
+      case 'pipeline': { // 管线
+        this._rainLineLayer.removeLayer();     // 雨水
+        this._sewageLineLayer.removeLayer();   // 污水
+        this._industryLineLayer.removeLayer(); // 工废
+
+        // 管线流向
+        this._rainLineFlowLayer.removeLayer();
+        this._sewageLineFlowLayer.removeLayer();
+        this._industryLineFlowLayer.removeLayer();
+        break;
+      }
+      case 'wellrain':
+      case 'manholerain': {
+        // 雨水井
+        this._rainHoleLayer.removeLayer();
+        break;
+      }
+      case 'wellsewage':
+      case 'manholewaste':
+      case 'manholesewage': {
+        // 污水井
+        this._sewageHoleLayer.removeLayer();
+        break;
+      }
+      case "wellindustry":
+      case "manholeindustry": {
+        // 工废井
+        this._industryHoleLayer.removeLayer();
+        break;
+      }
+      case "manhole": { // 检查井
+        this._rainHoleLayer.removeLayer();     // 雨水
+        this._sewageHoleLayer.removeLayer();   // 污水
+        this._industryHoleLayer.removeLayer(); // 工废
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 移除井标注图层
+   */
+  removeManholeLabelLayer() {
+    // 雨水井
+    this._rainHoleLayer.removeLabelLayer();
+    // 污水井
+    this._sewageHoleLayer.removeLabelLayer();
+    // 工废井
+    this._industryHoleLayer.removeLabelLayer();
+  }
+
+  /**
+   * 移除所有图层(销毁时调用)
+   */
+  removeAllLayers() {
+    // 雨水管线
+    this._rainLineLayer.removeLayer();
+    // 工废管线
+    this._industryLineLayer.removeLayer();
+    // 污水管线
+    this._sewageLineLayer.removeLayer();
+    // 移除管线数据源
+    this._sewageLineLayer.removeSource();
+
+    // 雨水管线流向
+    this._rainLineFlowLayer.removeLayer();
+    // 工废管线流向
+    this._industryLineFlowLayer.removeLayer();
+    // 污水管线流向
+    this._sewageLineFlowLayer.removeLayer();
+    // 移除流向数据源
+    this._sewageLineFlowLayer.removeSource();
+
+    // 雨水井
+    this._rainHoleLayer.removeLayer();
+    // 工废井
+    this._industryHoleLayer.removeLayer();
+    // 污水井
+    this._sewageHoleLayer.removeLayer();
+    // 移除井数据源
+    this._sewageHoleLayer.removeSource();
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} type -设施类型
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  bindEvent(type, name, event) {
+    switch (type) {
+      case 'piperain':
+      case 'pipelinerain': {
+        // 雨水管线
+        this._rainLineLayer.onEvent(name, event);
+        break;
+      }
+      case 'pipesewage':
+      case 'pipelinewaste':
+      case 'pipelinesewage': {
+        // 污水管线
+        this._sewageLineLayer.onEvent(name, event);
+        break;
+      }
+      case 'pipeindustry':
+      case 'pipelineindustry': {
+        // 工废管线
+        this._industryLineLayer.onEvent(name, event);
+        break;
+      }
+      case 'pipeline': { // 管线
+        this._rainLineLayer.onEvent(name, event);   // 雨水管线
+        this._sewageLineLayer.onEvent(name, event); // 污水管线
+        this._industryLineLayer.onEvent(name, event); // 工废管线
+        break;
+      }
+      case 'wellrain':
+      case 'manholerain': {
+        // 雨水井
+        this._rainHoleLayer.onEvent(name, event);
+        break;
+      }
+      case 'wellsewage':
+      case 'manholewaste':
+      case 'manholesewage': {
+        // 污水井
+        this._sewageHoleLayer.onEvent(name, event);
+        break;
+      }
+      case "wellindustry":
+      case "manholeindustry": {
+        // 工废井
+        this._industryHoleLayer.onEvent(name, event);
+        break;
+      }
+      case 'manhole': { // 检查井
+        this._rainHoleLayer.onEvent(name, event);   // 雨水井
+        this._sewageHoleLayer.onEvent(name, event); // 污水井
+        this._industryHoleLayer.onEvent(name, event); // 工废井
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {String} type -设施类型
+   * @param {Function} event -事件函数
+   */
+  bindClickEvent(type, event) {
+    switch (type) {
+      case 'piperain':
+      case 'pipelinerain': {
+        // 雨水管线
+        this._rainLineLayer.onClick(event);
+        break;
+      }
+      case 'pipesewage':
+      case 'pipelinewaste':
+      case 'pipelinesewage': {
+        // 污水管线
+        this._sewageLineLayer.onClick(event);
+        break;
+      }
+      case 'pipeindustry':
+      case 'pipelineindustry': {
+        // 工废管线
+        this._industryLineLayer.onClick(event);
+        break;
+      }
+      case 'pipeline': { // 管线
+        this._rainLineLayer.onClick(event);     // 雨水
+        this._sewageLineLayer.onClick(event);   // 污水
+        this._industryLineLayer.onClick(event); // 工废
+        break;
+      }
+      case 'wellrain':
+      case 'manholerain': {
+        // 雨水井
+        this._rainHoleLayer.onClick(event);
+        break;
+      }
+      case 'wellsewage':
+      case 'manholewaste':
+      case 'manholesewage':  {
+        // 污水井
+        this._sewageHoleLayer.onClick(event);
+        break;
+      }
+      case "wellindustry":
+      case "manholeindustry": {
+        // 工废井
+        this._industryHoleLayer.onClick(event);
+        break;
+      }
+      case 'manhole': { // 检查井
+        this._rainHoleLayer.onClick(event);     // 雨水
+        this._sewageHoleLayer.onClick(event);   // 污水
+        this._industryHoleLayer.onClick(event); // 工废
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /** 私有方法 **/
+  /**
+   * 初始化图层
+   */
+  _initLayers() {
+    // 管线
+    this._initPipelineLayer();
+    // 管线流向
+    this._initFlowLayer();
+
+    // 检查井
+    this._initManholeLayer();
+  }
+
+  /**
+   * 初始化管线图层
+   */
+  _initPipelineLayer() {
+    const map = this._map;
+    const minZoom = this._minzoom;
+    const cached = this._cachedPipe; // 是否缓存的管网
+    const lineWidth = this._width;
+
+    // 雨水管线
+    this._rainLineLayer = new PipelineLayer({
+      map: map,
+      minzoom: minZoom,
+      cached: cached,
+      color: '#13B55C',
+      width: lineWidth,
+      filter: ['==', 'category', '1'],
+      sourceId: this._pipelineSourceId,
+      layerId: this._rainLineLayerId
+    });
+
+    // 污水管线
+    this._sewageLineLayer = new PipelineLayer({
+      map: map,
+      minzoom: minZoom,
+      cached: cached,
+      color: '#FF4500',
+      width: lineWidth,
+      filter: ['==', 'category', '2'],
+      sourceId: this._pipelineSourceId,
+      layerId: this._sewageLineLayerId
+    });
+
+    // 工废管线
+    this._industryLineLayer = new PipelineLayer({
+      map: map,
+      minzoom: minZoom,
+      cached: cached,
+      color: '#FF00FF',
+      width: lineWidth,
+      filter: ['==', 'category', '5'],
+      sourceId: this._pipelineSourceId,
+      layerId: this._industryLineLayerId
+    });
+  }
+
+  /**
+   * 初始化管线流向图层
+   */
+  _initFlowLayer() {
+    const map = this._map;
+    const minZoom = this._minzoom + 6.75;
+    const cached = this._cachedPipe; // 是否缓存的管网
+
+    const field = 'label';
+    const textSize = 16;
+
+    // 雨水管线流向
+    this._rainLineFlowLayer = new PipeflowLayer({
+      map: map,
+      minzoom: minZoom,
+      cached: cached,
+      field: field,
+      textSize: textSize,
+      showLabel: cached,
+      filter: ['==', 'category', '1'],
+      sourceId: this._pipelineFlowSourceId,
+      layerId: this._rainLineFlowLayerId
+    });
+
+    // 污水管线流向
+    this._sewageLineFlowLayer = new PipeflowLayer({
+      map: map,
+      minzoom: minZoom,
+      cached: cached,
+      field: field,
+      textSize: textSize,
+      showLabel: cached,
+      filter: ['==', 'category', '2'],
+      sourceId: this._pipelineFlowSourceId,
+      layerId: this._sewageLineFlowLayerId
+    });
+
+    // 工废管线流向
+    this._industryLineFlowLayer = new PipeflowLayer({
+      map: map,
+      minzoom: minZoom,
+      cached: cached,
+      field: field,
+      textSize: textSize,
+      showLabel: cached,
+      filter: ['==', 'category', '5'],
+      sourceId: this._pipelineFlowSourceId,
+      layerId: this._industryLineFlowLayerId
+    });
+  }
+
+  /**
+   * 初始化检查井图层
+   */
+  _initManholeLayer() {
+    const map = this._map;
+    const minZoom = this._minzoom + 4;
+    const cached = this._cachedPipe; // 是否缓存的管网
+
+    const field = 'nodeid';
+    const textSize = 12;
+    const iconSize = [
+      "interpolate", ["linear"], ["zoom"],
+      minZoom + 1.5,
+      0.75,
+      minZoom + 3,
+      1.0
+    ];
+
+    // 雨水井
+    this._rainHoleLayer = new ManholeLayer({
+      map: map,
+      minzoom: minZoom,
+      cached: cached,
+      /*
+      icon: [
+        'step',
+        ['zoom'],
+        'well_rain-min',
+        minZoom + 1.5, 'well_rain1x',
+        minZoom + 3, 'well_rain'
+      ],
+      */
+      icon: 'well_rain1x',
+      field: field,
+      textSize: textSize,
+      filter: ['==', 'category', '1'],
+      sourceId: this._manholeSourceId,
+      layerId: this._rainHoleLayerId
+    });
+
+    // 污水井
+    this._sewageHoleLayer = new ManholeLayer({
+      map: map,
+      minzoom: minZoom,
+      cached: cached,
+      /*
+      icon: {
+        type: 'categorical',
+        property: 'junc_type',
+        stops: [
+          ['3', 'well_sew-gate'],
+          ['4', 'well_sew-overflow'],
+          ['6', 'well_sew-gas'],
+          ['8', 'well_sew-detect'],
+          ['12', 'well_sew-drop']
+        ],
+        default: 'well_sew'
+      },
+      */
+      /*
+      icon: [
+        'step',
+        ['zoom'],
+        'well_sew-min',
+        minZoom + 1.5, 'well_sew1x',
+        minZoom + 3, 'well_sew'
+      ],
+      */
+      icon: 'well_sew1x',
+      field: field,
+      textSize: textSize,
+      filter: ['==', 'category', '2'],
+      sourceId: this._manholeSourceId,
+      layerId: this._sewageHoleLayerId
+    });
+
+    // 工废井
+    this._industryHoleLayer = new ManholeLayer({
+      map: map,
+      minzoom: minZoom,
+      cached: cached,
+      /*
+      icon: [
+        'step',
+        ['zoom'],
+        'well_ind-min',
+        minZoom + 1.5, 'well_ind1x',
+        minZoom + 3, 'well_ind'
+      ],
+      */
+      icon: 'well_ind1x',
+      field: field,
+      textSize: textSize,
+      filter: ['==', 'category', '5'],
+      sourceId: this._manholeSourceId,
+      layerId: this._industryHoleLayerId
+    });
+  }
+}