csk-gis-frame-work 4.0.0

package/mapboxgl/js/dynamic/VehicleLayer.js

@@ -0,0 +1,236 @@
+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 VehicleLayer
+ *
+ * @summary <用于加载车辆点位>
+ */
+export default class VehicleLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    this._icon = 'busi_vehicle';
+    this._labelIcon = 'icon_rounded';
+    this._labelSelIcon = 'icon_roundedsel';
+
+    this._fc = GeoJsonProvider.getEmptyFC(); // 要素集
+    this._selFeature = null; // 选中的要素
+
+    /** 数据源/图层ID **/
+    this._defaultSourceId = 'pipe_facility_vehicle'; // 默认数据源
+
+    this._sourceId = 'pipe_vehicle';
+    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._fc.features.forEach(fea => {
+            fea.properties.caption = fea.properties.plate;
+          });
+          // 设置数据
+          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: 'caption',
+      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/WorkorderLayer.js

@@ -0,0 +1,110 @@
+import DataUtils from "../utils/DataUtils";
+import SimpleMarkerLayer from '../common/SimpleMarkerLayer';
+
+/**
+ * 定义工单图层提供类
+ *
+ * @alias WorkorderLayer
+ *
+ * @summary <用于加载工单点位图层>
+ */
+ export default class WorkorderLayer {
+  /**
+   * 构造函数
+   * @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, 'icon_order');
+
+    // 点位图层
+    this._markerLayer = new SimpleMarkerLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      sourceId: 'pipe_facility_order',
+      icon: this._icon,
+      field: 'type',
+      textOffset: [0.8, 0.2]
+    });
+  }
+
+  /**
+   * 设置工单数据
+   * @param {String|Object} data -工单数据
+   */
+  setData(data = null) {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this._markerLayer.loadLayer();
+    }
+
+    // 显示图层
+    this.showLayer(true);
+  }
+
+  /**
+   * 设置筛选器
+   * @param {Array} filter -筛选器
+   */
+  setFilter(filter) {
+    this._markerLayer.setFilter(filter);
+  }
+
+  /**
+   * 显示/隐藏工单图层
+   * @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);
+  }
+}

package/mapboxgl/js/editor/DeleteMarkerLayer.js

@@ -0,0 +1,184 @@
+import DataUtils from '../utils/DataUtils';
+import VerifyUtils from "../utils/VerifyUtils";
+import GeoJsonProvider from '../geog/GeoJsonProvider';
+import SimpleMarkerLayer from '../common/SimpleMarkerLayer';
+
+/**
+ * 定义删除标记图层
+ *
+ * @alias DeleteMarkerLayer
+ *
+ * @summary <用于删除标记点位图层>
+ */
+export default class DeleteMarkerLayer {
+  /**
+   * 构造函数
+   * @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_delete');
+
+    /**
+     * 偏移
+     * @type {Array}
+     */
+    this._offset = DataUtils.default(options.icon, [-5, -5]);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'point_delete');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 要素集
+    this._fc = GeoJsonProvider.getEmptyFC();
+
+    // 创建标记图层
+    this._markerLayer = new SimpleMarkerLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      icon: this._icon,
+      offset: this._offset,
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+
+  /**
+   * 设置数据
+   * @param {Object|Array} data -GeoJson要素/要素集/点位数组
+   */
+  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 {Object|Array} data -GeoJson要素/要素集/点位数组
+   */
+  appendData(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);
+    }
+
+    if (fc && fc.features && fc.features.length > 0) {
+      // 合并要素集合
+      this._fc.features = this._fc.features.concat(fc.features);
+
+      // 设置数据
+      this._markerLayer.setData(this._fc);
+    }
+  }
+
+  /**
+   * 删除数据
+   * @param {String} name -字段名
+   * @param {Object} value -字段值
+   */
+  deleteData(name, value) {
+    // 更新数据
+    const features = this._fc.features.filter(feature => {
+      return feature.properties[name] !== value;
+    });
+    this._fc.features = features;
+
+    // 设置数据
+    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);
+  }
+}