csk-gis-frame-work 4.0.0

package/mapboxgl/js/dynamic/DefectLayer.js

@@ -0,0 +1,137 @@
+import DataUtils from '../utils/DataUtils';
+import VerifyUtils from "../utils/VerifyUtils";
+import GeoJsonProvider from '../geog/GeoJsonProvider';
+import SimpleCircleLayer from '../common/SimpleCircleLayer';
+
+/**
+ * 定义缺陷点图层
+ *
+ * @alias DefectLayer
+ *
+ * @summary <用于加载缺陷点图层>
+ */
+export default class DefectLayer {
+    /**
+     * 构造函数
+     * @param {Object} options -图层选项
+     */
+    constructor(options) {
+        /**
+         * 地图对象
+         * @type {Object}
+         */
+        this._map = options.map;
+
+        /**
+         * 最小缩放层级
+         * @type {String}
+         */
+        this._minzoom = DataUtils.default(options.minzoom, 10);
+
+        // 隐患数据源ID
+        this._sourceId = DataUtils.default(options.sourceId, 'pipe_facility_defect');
+
+        /** 图层ID **/
+        this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+        /** 图层对象 **/
+        // 初始化图层
+        let colorExp = {
+            property: "level",
+            type: "categorical",
+            stops: [
+                [0, "#49AA77"],
+                [1, "#FAAD14"],
+                [2, "#FAAD14"],
+                [3, "#FF4D4F"],
+                [4, "#FF4D4F"],
+            ],
+            default: "#49AA77"
+        };
+
+        // 缺陷点图层
+        this._circleLayer = new SimpleCircleLayer({
+            map: this._map,
+            minzoom: this._minzoom,
+            color: colorExp,
+            outline: true,
+            lineColor: colorExp,
+            sourceId: this._sourceId,
+            layerId: this._layerId
+        });
+    }
+
+    /** 公有方法 **/
+    /**
+     * 设置数据
+     * @param {Array|Object} data -数据
+     */
+    setData(data) {
+        let fc = null;
+        if (VerifyUtils.isGeoJsonFC(data)) {
+            fc = data;
+        } else if (VerifyUtils.isGeoJsonFeature(data)) {
+            fc = GeoJsonProvider.getEmptyFC();
+            fc.features = [data];
+        } else if (VerifyUtils.isArray(data)) {
+            fc = GeoJsonProvider.data2PointFC(data);
+        }
+
+        this._fc = fc;
+        // 设置数据
+        this._circleLayer.setData(this._fc);
+    }
+
+    /**
+     * 设置过滤器
+     * @param {Array} filter -过滤器
+     */
+    setFilter(filter) {
+        this._circleLayer.setFilter(filter);
+    }
+
+    /**
+     * 加载图层
+     */
+    loadLayer() {
+        if (!this.hasLayer()) {
+            this._circleLayer.loadLayer();
+        }
+
+        this.showLayer(trut);
+    }
+
+    /**
+    * 显示/隐藏图层
+    * @param {Boolean} isShow -是否显示
+    */
+    showLayer(isShow) {
+        this._circleLayer.showLayer(isShow);
+    }
+
+    /**
+     * 绑定单击事件
+     * @param {Function} event -事件函数
+     */
+    onClick(event) {
+        this._circleLayer.onClick(event);
+    }
+
+    /**
+     * 移除图层
+     */
+    removeLayer() {
+        this._circleLayer.removeLayer();
+        // 移除数据源
+        this._circleLayer.removeSource();
+    }
+
+    /**
+     * 判断图层是否已加载
+     *
+     * @returns {Boolean}
+     */
+    hasLayer() {
+        return this._circleLayer.hasLayer();
+    }
+}

package/mapboxgl/js/dynamic/EventLayer.js

@@ -0,0 +1,151 @@
+import DataUtils from "../utils/DataUtils";
+import VerifyUtils from "../utils/VerifyUtils";
+import MapProvider from "../geog/MapProvider";
+import GeoJsonProvider from '../geog/GeoJsonProvider';
+import SimpleMarkerLayer from '../common/SimpleMarkerLayer';
+
+/**
+ * 定义事件点位图层
+ * @alias EventLayer
+ *
+ * @summary <用于加载事件点位>
+ */
+export default class EventLayer {
+  /**
+   * 构造函数
+   * @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, 'busi_result');;
+
+    // 要素集
+    this._fc = GeoJsonProvider.getEmptyFC();
+
+    /** 数据源/图层ID **/
+    this._sourceId = 'pipe_event';
+    this._layerId = this._sourceId;
+
+    // 初始化图层
+    this._markerLayer = new SimpleMarkerLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      icon: this._icon,
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {Array|Object} data -事件数据
+   */
+  setData(data) {
+    let fc = null;
+    if (VerifyUtils.isGeoJsonFC(data)) {
+      fc = data;
+    } else if (VerifyUtils.isGeoJsonFeature(data)) {
+      fc = GeoJsonProvider.getEmptyFC();
+      fc.features = [data];
+    } else if (VerifyUtils.isArray(data)) {
+      fc = GeoJsonProvider.data2PointFC(data);
+    }
+
+    this._fc = fc || GeoJsonProvider.getEmptyFC();
+    // 设置数据
+    this._markerLayer.setData(this._fc);
+  }
+
+  /**
+   * 设置筛选器
+   * @param {Array} filter -筛选器
+   */
+  setFilter(filter) {
+    this._markerLayer.setFilter(filter);
+  }
+
+  /**
+   * 选择数据
+   * @param {Object} data -数据
+   * @param {String} name -字段名
+   */
+  selectData(data, name) {
+    if (!this._fc) return;
+
+    let value = data[name].toString();
+
+    const features = this._fc.features.filter(fea => {
+      return fea.properties[name].toString() === value;
+    });
+    if (features.length === 0) return;
+
+    if (this._selFeature) {
+      this._selFeature.properties.select = 0;
+    }
+    const selFeature = features[0];
+    selFeature.properties.select = 1;
+
+    this._selFeature = selFeature;
+
+    MapProvider.flyTo(this._map, selFeature.geometry.coordinates, 17);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示图层
+   */
+  showLayer(isShow = true) {
+    this._markerLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._markerLayer.hasLayer();
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._markerLayer.removeLayer();
+    // 移除数据源
+    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/dynamic/StaffLayer.js

@@ -0,0 +1,233 @@
+import DataUtils from "../utils/DataUtils";
+import VerifyUtils from "../utils/VerifyUtils";
+import MapProvider from "../geog/MapProvider";
+import GeoJsonProvider from '../geog/GeoJsonProvider';
+import SimpleMarkerLayer from '../common/SimpleMarkerLayer';
+
+import { getApi } from "../../api/http";
+
+/**
+ * 定义人员点位图层
+ * @alias StaffLayer
+ *
+ * @summary <用于加载人员点位>
+ */
+export default class StaffLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    this._icon = 'busi_staff';
+    this._labelIcon = 'icon_rounded';
+    this._labelSelIcon = 'icon_roundedsel';
+
+    this._fc = null; // 要素集
+    this._selFeature = null; // 选中的要素
+
+    /** 数据源/图层ID **/
+    this._defaultSourceId = 'pipe_facility_staff'; // 默认数据源
+
+    this._sourceId = 'pipe_staff';
+    this._labelSourceId = this._sourceId + '-label';
+
+    this._layerId = this._sourceId;
+    this._labelLayerId = this._labelSourceId;
+
+    /** 图层 **/
+    this._markerLayer = null;
+    this._labelLayer = null;
+    // 初始化图层
+    this._initLayers();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {Array|Object} data -人员数据
+   */
+  setData(data) {
+    if (!data) {
+      // 获取默认数据源地址
+      const source = this._map.getSource(this._defaultSourceId);
+      if (source) {
+        const url = source._data;
+        // 获取地图服务接口数据
+        getApi(url).then((res) => {
+          this._fc = res.data;
+          // 设置数据
+          this._markerLayer.setData(this._fc);
+          this._labelLayer.setData(this._fc);
+        });
+      }
+    } else {
+      let fc = null;
+      if (VerifyUtils.isGeoJsonFC(data)) {
+        fc = data;
+      } else if (VerifyUtils.isGeoJsonFeature(data)) {
+        fc = GeoJsonProvider.getEmptyFC();
+        fc.features = [data];
+      } else if (VerifyUtils.isArray(data)) {
+        fc = GeoJsonProvider.data2PointFC(data);
+      }
+
+      this._fc = fc || GeoJsonProvider.getEmptyFC();
+      // 设置数据
+      this._markerLayer.setData(this._fc);
+      this._labelLayer.setData(this._fc);
+    }
+  }
+
+  /**
+   * 设置筛选器
+   * @param {Array} filter -筛选器
+   */
+  setFilter(filter) {
+    if (!this.hasLayer()) return;
+
+    this._markerLayer.setFilter(filter);
+    this._labelLayer.setFilter(filter);
+  }
+
+  /**
+   * 选择数据
+   * @param {Object} data -人员数据
+   * @param {String} name -字段名
+   */
+  selectData(data, name) {
+    if (!this._fc || !data[name]) return;
+
+    let value = data[name].toString();
+
+    const features = this._fc.features.filter(fea => {
+      return fea.properties[name].toString() === value;
+    });
+    if (features.length === 0) return;
+
+    if (this._selFeature) {
+      this._selFeature.properties.select = 0;
+    }
+    const selFeature = features[0];
+    selFeature.properties.select = 1;
+
+    this._selFeature = selFeature;
+    // 设置标注
+    this._labelLayer.setData(this._fc);
+
+    MapProvider.flyTo(this._map, selFeature.geometry.coordinates, 16);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示图层
+   */
+  showLayer(isShow = true) {
+    this._markerLayer.showLayer(isShow);
+    this._labelLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return (
+      this._markerLayer.hasLayer() &&
+      this._labelLayer.hasLayer()
+    );
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._markerLayer.removeLayer();
+    this._labelLayer.removeLayer();
+    // 移除数据源
+    this._markerLayer.removeSource();
+    this._labelLayer.removeSource();
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  onClick(event) {
+    this._markerLayer.onClick(event);
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   */
+  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,
+      size: [
+        'step',
+        ['zoom'], 0.7,
+        minZoom + 1.5, 0.8,
+        minZoom + 2.5, 0.9,
+        minZoom + 4, 1.0
+      ],
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+
+    // 初始化标注图层
+    this._labelLayer = new SimpleMarkerLayer({
+      map: map,
+      minzoom: minZoom,
+      icon: {
+        type: 'categorical',
+        property: 'select',
+        stops: [
+          [0, this._labelIcon],
+          [1, this._labelSelIcon]
+        ],
+        default: this._labelIcon
+      },
+      offset: [0, 1.75],
+      field: 'name',
+      textSize: [
+        'step',
+        ['zoom'], 11,
+        minZoom + 2, 12,
+        minZoom + 4, 13,
+        minZoom + 6, 14
+      ],
+      textOffset: [0, 1.75],
+      around: true,
+      sourceId: this._labelSourceId,
+      layerId: this._labelLayerId
+    });
+  }
+}

package/mapboxgl/js/dynamic/StoreLayer.js

@@ -0,0 +1,143 @@
+import DataUtils from '../utils/DataUtils';
+import VerifyUtils from "../utils/VerifyUtils";
+import GeoJsonProvider from '../geog/GeoJsonProvider';
+import SimpleMarkerLayer from '../common/SimpleMarkerLayer';
+
+/**
+ * 定义仓库图层
+ *
+ * @alias StoreLayer
+ *
+ * @summary <用于加载仓库点位图层>
+ */
+export default class StoreLayer {
+  /**
+   * 构造函数
+   * @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, 'busi_store');
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_facility_store');
+
+    /**
+     * 图层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: 'name',
+      textOffset: [0, 1.5],
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+
+  /**
+   * 设置数据
+   * @param {Object|Array} data -GeoJson要素/要素集/点位数组
+   */
+  setData(data = null) {
+    let fc = null;
+    if (VerifyUtils.isGeoJsonFC(data)) {
+      fc = data;
+    } else if (VerifyUtils.isGeoJsonFeature(data)) {
+      fc = GeoJsonProvider.getEmptyFC();
+      fc.features = [data];
+    } else if (VerifyUtils.isArray(data)) {
+      fc = GeoJsonProvider.data2PointFC(data);
+    }
+
+    this._fc = fc || GeoJsonProvider.getEmptyFC();
+    // 设置数据
+    this._markerLayer.setData(this._fc);
+  }
+
+  /**
+   * 设置过滤器
+   * @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();
+    // 移除数据源
+    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);
+  }
+}