csk-gis-frame-work 4.0.0

package/mapboxgl/js/common/FlowingLayer.js

@@ -0,0 +1,325 @@
+import * as turf from "@turf/turf";
+import DataUtils from '../utils/DataUtils';
+import ColorUtils from '../utils/ColorUtils';
+import VerifyUtils from '../utils/VerifyUtils';
+import GeoJsonProvider from '../geog/GeoJsonProvider';
+import LayerProvider from '../geog/LayerProvider';
+
+/**
+ * 定义路线流向图层
+ * @alias FlowingLayer
+ *
+ * @summary <用于追溯分析>
+ */
+export default class FlowingLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /**
+     * 管线颜色
+     * @type {String}
+     */
+    this._lineColor = DataUtils.default(options.color, '#2E8B57');
+
+    /**
+     * 线宽
+     * @type {Number}
+     */
+    this._lineWidth = DataUtils.default(options.width, 3.0);
+
+    /**
+     * 是否固定(线宽)
+     * @type {Boolean}
+     */
+    this._fixed = DataUtils.default(options.fixed, true);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipenet_flowing');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 定时器
+    this._timer = undefined;
+
+    // 数据源要素集
+    this._fc = GeoJsonProvider.getEmptyFC();
+
+    this._routeColorNum = 0; // 路径颜色数
+    this._routeColors = [];  // 路径颜色数组
+    // 设置颜色带
+    this._initColorRamps();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置管线路径颜色
+   * @param {String} color -16进制颜色字符串
+   */
+  setColor(color) {
+    this._lineColor = color;
+    // 设置颜色带
+    this._initColorRamps();
+  }
+
+  /**
+   * 设置数据
+   * @param {Object} data -GeoJSON要素/要素集
+   */
+  setData(data) {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this.loadLayer();
+    }
+    // 隐藏图层
+    this.showLayer(false);
+
+    // 初始化路线数据
+    this._initRouteData(data);
+
+    // 更新数据源
+    LayerProvider.updateSource(this._map, this._sourceId, this._fc);
+  }
+
+  /**
+   * 开始
+   */
+  start() {
+    // 显示图层
+    this.showLayer(true);
+
+    let colorNum = 0;
+    let that = this;
+    /**
+     * 动画
+     */
+    function _animate() {
+      colorNum++
+      for (let i = 0; i < that._fc.features.length; i++) {
+        const countNumShow = colorNum % that._routeColorNum;
+        const pageNum = i % that._routeColorNum;
+        const totalNum = pageNum - countNumShow;
+        if (totalNum <= 0) {
+          that._fc.features[i].properties.color = that._routeColors[that._routeColorNum - 1 - Math.abs(totalNum)];
+        }
+        if (totalNum > 0) {
+          that._fc.features[i].properties.color = that._routeColors[totalNum - 1];
+        }
+      }
+
+      // 更新数据源
+      LayerProvider.updateSource(that._map, that._sourceId, that._fc);
+    }
+
+    // 设置动画帧
+    let FRAME_RATE = 3; // 帧率
+    (function _frame() {
+      try {
+        // 停止定时器
+        if (that._timer) {
+          clearTimeout(that._timer);
+          that._timer = undefined;
+        }
+
+        that._timer = setTimeout(function () {
+          // 动画
+          _animate();
+          _frame();
+        }, 1000 / FRAME_RATE);
+      }
+      catch (e) {
+        console.error(e);
+      }
+    })();
+  }
+
+  /**
+   * 停止
+   */
+  stop() {
+    // 停止定时器
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = undefined;
+    }
+
+    // 隐藏图层
+    this.showLayer(false);
+  }
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {
+    if (this.hasLayer()) return;
+
+    const map = this._map;
+    const minZoom = this._minzoom;
+    const maxZoom = map.getMaxZoom();
+
+    // 添加数据源
+    map.addSource(this._sourceId, {
+      type: "geojson",
+      data: this._fc,
+      lineMetrics: true, // 用于渐变线
+    });
+    // 添加图层
+    map.addLayer({
+      type: 'line',
+      id: this._layerId,
+      source: this._sourceId,
+      minzoom: minZoom,
+      layout: {
+        "line-join": "round",
+        "line-cap": "butt",
+        visibility: "none"
+      },
+      paint: {
+        "line-color": ["get", "color"],
+        "line-width": this._fixed
+        ? this._lineWidth
+        : {
+          base: 2.5,
+          stops: [
+            [minZoom, 2.5],
+            [maxZoom, this._lineWidth]
+          ]
+        }
+      }
+    }, map._build3dLayerId);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} show -是否显示
+   */
+  showLayer(show) {
+    LayerProvider.showLayer(this._map, this._layerId, show);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return LayerProvider.hasLayer(this._map, this._layerId);
+  }
+
+  /**
+   * 移除图层(and数据源)
+   */
+  removeLayer() {
+    this.stop();
+
+    // 移除图层
+    LayerProvider.removeLayer(this._map, this._layerId);
+    // 移除数据源
+    LayerProvider.removeSource(this._map, this._sourceId);
+  }
+
+  /** 私有方法 **/
+  /**
+   * 初始化颜色带
+   */
+  _initColorRamps() {
+    const color = this._lineColor;
+
+    this._routeColorNum = 12; // 路径颜色数
+    this._routeColors = [];  // 路径颜色数组
+
+    // 转RGB数组
+    let colorArr = ColorUtils.hexToArray(color);
+    let op = 0.4; // 透明度
+
+    for (let i = 0; i < this._routeColorNum; i++) {
+      op += 0.05;
+      let color = 'rgba(' + colorArr[0] + ',' + colorArr[1] + ',' + colorArr[2] + ',' + op.toFixed(2) + ')';
+
+      this._routeColors.push(color);
+    }
+  }
+
+  /**
+   * 初始化路线数据
+   * @param {Object} data -GeoJSON要素/要素集
+   */
+  _initRouteData(data) {
+    this._fc.features = [];
+
+    let features = [];
+    if (VerifyUtils.isGeoJsonFC(data)) {
+      features = data.features;
+    } else if (VerifyUtils.isGeoJsonFeature(data)) {
+      features.push(data);
+    }
+    if (features.length === 0) return;
+
+    let routeFeatures = [];
+    for (let i = 0; i < features.length; i++) {
+      let feature = features[i];
+      let geomType = feature.geometry.type.toLowerCase();
+      switch (geomType) {
+        case 'linestring': {
+          routeFeatures.push(feature);
+          break;
+        }
+        case 'multilinestring': {
+          let props = feature.properties;
+          let lineStrings = feature.geometry.coordinates;
+          for (let j = 0; j < lineStrings.length; j++) {
+            let lineString = lineStrings[j];
+            routeFeatures.push(GeoJsonProvider.getLineStringFeature(lineString, props));
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    }
+    if (routeFeatures.length === 0) return;
+
+    let chunkFeatures = [];
+    routeFeatures.forEach(fea => {
+      let points = fea.geometry.coordinates;
+
+      // 分割线段
+      let lineCount = turf.lineString(points);
+      let chunkFC = turf.lineChunk(lineCount, 0.01, { units: 'kilometers' });
+
+      for (let i = 0; i < chunkFC.features.length; i++) {
+        let chunkFea = chunkFC.features[i];
+
+        let ls = chunkFea.geometry.coordinates;
+        if (ls.length < 3) {
+          let center = turf.midpoint(turf.point(ls[0]), turf.point(ls[1]));
+          ls.splice(1, 0, center.geometry.coordinates);
+        }
+
+        chunkFeatures.push(chunkFea);
+      }
+    });
+
+    this._fc.features = chunkFeatures;
+  }
+}

package/mapboxgl/js/common/HeatmapLayer.js

@@ -0,0 +1,280 @@
+import DataUtils from '../utils/DataUtils';
+import VerifyUtils from '../utils/VerifyUtils';
+import LayerProvider from '../geog/LayerProvider';
+import GeoJsonProvider from '../geog/GeoJsonProvider';
+
+/**
+ * 定义热力图图层
+ * @alias HeatmapLayer
+ *
+ * @summary <用于热力图加载>
+ */
+ export default class HeatmapLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    // 默认数据源ID
+    this._defaultSourceId = 'point_heatmap';
+    // 数据源是否存在
+    this._hasSource = true;
+
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /**
+     * 过滤条件数组
+     * @type {Array}
+     */
+    this._filter = DataUtils.default(options.filter, undefined);
+
+    /**
+     * 图层服务地址
+     * @type {String}
+     */
+    this._dataUrl = DataUtils.default(options.dataUrl, undefined);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, this._defaultSourceId);
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 数据源要素集
+    this._fc = GeoJsonProvider.getEmptyFC();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {Array|Object|String} data -点数据/图层地址
+   */
+  /**
+   * 设置数据
+   * @param {Object|String|Array} data -GeoJSON要素集/查询语句/过滤条件(点位)数组
+   *
+   * @summary <data参数：
+   *   Object - GeoJson要素/要素集
+   *   String - cql_filter查询语句
+   *   Array - 图层过滤条件数组(如：['==', field, value]) or 点位数组(包含longitude, latitude字段)
+   * >
+   */
+  setData(data) {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this.loadLayer();
+    }
+    // 隐藏图层
+    this.showLayer(false);
+
+    let fc = null;
+    if (VerifyUtils.isGeoJsonFC(data)) {
+      fc = data;
+    } else if (VerifyUtils.isGeoJsonFeature(data)) {
+      // GeoJSON要素
+      fc = GeoJsonProvider.getEmptyFC();
+      fc.features = [data];
+    } else if (VerifyUtils.isString(data)) {
+      // 图层url
+      fc = data;
+    } else if (VerifyUtils.isArray(data)) {
+      if (data.length > 1 && VerifyUtils.isString(data[0])) {
+        // 设置筛选器
+        this._map.setFilter(this._layerId, data);
+      } else {
+        // 数组转GeoJSON对象
+        fc = GeoJsonProvider.data2PointFC(data);
+      }
+    } else if (VerifyUtils.isString(data)) {
+      // 查询语句
+      if (this._hasSource) {
+        const source = this._map.getSource(this._defaultSourceId);
+        fc = source._data + (data ? "&cql_filter=" + data : '');
+      }
+    }
+
+    this._fc.features = [];
+    this._fc = fc || GeoJsonProvider.getEmptyFC();
+
+    // 更新数据源
+    this._map.getSource(this._sourceId).setData(this._fc);
+    // 显示图层
+    this.showLayer(true);
+  }
+
+  /**
+   * 添加数据(只针对接口)
+   * @param {Array|Object} data -点数组/GeoJSON要素集
+   */
+  appendData(data) {
+    if (!data) return;
+
+    if (!this._fc || VerifyUtils.isString(this._fc)) {
+      this._fc = GeoJsonProvider.getEmptyFC();
+    }
+
+    // 要素集必须存在
+    if (!VerifyUtils.isGeoJsonFC(this._fc)) return;
+
+    // 要添加的数据必须是GeoJSON要素集、点数组
+    if (!(VerifyUtils.isGeoJsonFC(data) || VerifyUtils.isArray(data))) return;
+
+    let fc = null;
+    if (VerifyUtils.isGeoJsonFC(data)) {
+      fc = data;
+    } else if (VerifyUtils.isArray(data)) {
+      // 数组转GeoJSON对象
+      fc = GeoJsonProvider.data2PointFC(data);
+    }
+    if (!fc) return;
+
+    // 合并要素列表
+    this._fc.features = this._fc.features.concat(fc.features);
+
+    // 更新数据源
+    this._map.getSource(this._sourceId).setData(this._fc);
+  }
+
+  /**
+   * 设置筛选器
+   * @param {Array} filter -筛选器
+   */
+  setFilter(filter) {
+    if (!this.hasLayer()) return;
+
+    // 空数组
+    if (VerifyUtils.isArray(filter) && filter.length === 0) {
+      filter = null;
+    }
+
+    let newFilter = null;
+    if (this._filter) {
+      newFilter = ['all', this._filter];
+    }
+
+    if (filter) {
+      if (!newFilter) {
+        newFilter = filter;
+      } else {
+        newFilter.push(filter);
+      }
+    }
+
+    // 设置筛选器
+    this._map.setFilter(this._layerId, newFilter);
+  }
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {
+    if (this.hasLayer()) return;
+
+    const map = this._map;
+    const minZoom = this._minzoom;
+    const maxZoom = map.getMaxZoom();
+
+    const sourceId = this._sourceId;
+    // 判断数据源是否存在
+    this._hasSource = LayerProvider.hasSource(map, sourceId);
+    if (!this._hasSource) {
+      // 添加数据源
+      map.addSource(sourceId, {
+        type: "geojson",
+        data: this._dataUrl || GeoJsonProvider.getEmptyFC()
+      });
+    }
+
+    // 添加图层
+    map.addLayer({
+      type: "heatmap",
+      id: this._layerId,
+      source: sourceId,
+      minzoom: minZoom,
+      paint: {
+        "heatmap-weight": 0.1,
+        "heatmap-intensity": [
+          "interpolate", ["linear"], ["zoom"],
+          minZoom, 1,
+          maxZoom, 5
+        ],
+        "heatmap-color": [
+          "interpolate", ["linear"], ["heatmap-density"],
+          0, "rgba(255,255,255,0)",
+          0.2, "rgb(0,0,255)",
+          0.4, "rgb(32,178,170)",
+          0.6, "rgb(0,255,0)",
+          0.8, "rgb(255,255,0)",
+          1, "rgb(255,0,0)"
+        ],
+        // Adjust the heatmap radius by zoom level
+        "heatmap-radius": [
+          "interpolate", ["linear"], ["zoom"],
+          minZoom, 5,
+          maxZoom, 24
+        ],
+        // Transition from heatmap to circle layer by zoom level
+        "heatmap-opacity": [
+          "interpolate", ["linear"], ["zoom"],
+          minZoom, 1,
+          maxZoom, 0.5
+        ]
+      },
+      layout: {
+        visibility: "none"
+      }
+    }, map._build3dLayerId);
+
+    // 筛选器
+    if (this._filter) {
+      map.setFilter(this._layerId, this._filter);
+    }
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示图层
+   */
+  showLayer(isShow) {
+    LayerProvider.showLayer(this._map, this._layerId, isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return LayerProvider.hasLayer(this._map, this._layerId);
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    LayerProvider.removeLayer(map, this._layerId);
+  }
+
+  /**
+   * 移除数据源
+   */
+  removeSource() {
+    LayerProvider.removeSource(this._map, this._sourceId);
+  }
+}

package/mapboxgl/js/common/ILayer.js

@@ -0,0 +1,89 @@
+
+/**
+ * 定义图层接口
+ *
+ * @alias ILayer
+ *
+ * @summary <图层抽象类>
+ */
+export default class ILayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {}
+
+  /**
+   * 设置数据
+   * @param {Object|Array} data -GeoJSON要素集/点位数组
+   *
+   * @summery <注：图层为GeoServer图层时，data参数值为null>
+   */
+  setData(data) {}
+
+  /**
+   * 设置筛选器
+   * @param {Array} filter -筛选器
+   */
+  setFilter(filter) {}
+
+  /**
+   * 设置绘制属性
+   * @param {String} name -属性名称
+   * @param {String|Object} value -属性值
+   */
+  setPaintProperty(name, value) {}
+
+  /**
+   * 设置布局属性
+   * @param {String} name -属性名称
+   * @param {String|Object} value -属性值
+   */
+  setLayoutProperty(name, value) {}
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {}
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} show -是否显示图层
+   */
+  showLayer(show) {}
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {}
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {}
+
+  /**
+   * 移除数据源
+   */
+  removeSource() {}
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  onClick(event) {}
+
+  /**
+   * 绑定事件
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  onEvent(name, event) {}
+
+  /**
+   * 解除事件绑定
+   */
+  offEvent() {}
+}