csk-gis-frame-work 4.0.0

package/mapboxgl/js/layers/PulserLayer.js

@@ -0,0 +1,161 @@
+import DataUtils from "../utils/DataUtils";
+import MarkerLayer from "./MarkerLayer";
+import Pulser from "./Pulser";
+
+/**
+ * 定义扩散图层
+ * @alias PulserLayer
+ * 
+ * @summary <用于报警点数据加载>
+ */
+export default class PulserLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minZoom = DataUtils.default(options.minZoom, 9);
+
+    /**
+     * 图标ID
+     * @type {String|Object}
+     */
+    this._icon = DataUtils.default(options.icon, 'marker_pulser');
+
+    /**
+     * 半径
+     * @type {Number}
+     */
+    this._radius = DataUtils.default(options.radius, 30);
+
+    /**
+     * 内圆颜色
+     * @type {Array}
+     */
+    this._innerColor = DataUtils.default(options.innerColor, [255, 25, 25]);
+    
+    /**
+     * 外圆颜色
+     * @type {Array}
+     */
+    this._outerColor = DataUtils.default(options.outerColor, [255, 50, 50]);
+
+    /**
+     * 过滤条件数组
+     * @type {Array}
+     */
+    this._filter = DataUtils.default(options.filter, undefined);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'marker_pulser');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 图层
+    this._pulserLayer = null;
+    // 初始化图层
+    this._initLayer();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {Object|Array} data -GeoJson要素集/要素/要素列表/点位数组
+   * 
+   * @summary <data参数：
+   *   Object - GeoJson要素集/要素
+   *   Array - GeoJson要素数组/点位数组(包含longitude/lng, latitude/lat字段)
+   * >
+   */
+  setData(data) {
+    if (!this._pulserLayer.hasLayer()) {
+      // 加载图标
+      this._loadPulserIcon();
+    }
+
+    this._pulserLayer.setData(data);
+  }
+
+  /**
+   * 移除图层 
+   */
+  removeLayer() {
+    this._pulserLayer.removeLayer();
+    // 移除数据源
+    this._pulserLayer.removeSource();
+
+    // 移除图标
+    if (this._map.hasImage(this._icon)) {
+      this._map.removeImage(this._icon);
+    }
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  onClick(event) {
+    this._pulserLayer.onClick(event);
+  }
+
+  /** 私有方法 **/
+  /**
+   * 初始化图层 
+   */
+  _initLayer() {
+    this._pulserLayer = new MarkerLayer({
+      map: this._map,
+      minzoom:this._minZoom,
+      icon: this._icon,
+      opacity: 0.75,
+      filter: this._filter,
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+  }
+
+  /**
+   * 加载脉冲图标 
+   */
+  _loadPulserIcon() {
+    const map = this._map;
+
+    if (!map.hasImage(this._icon)) {
+      const pulser = new Pulser({
+        map: map,
+        size: this._radius * 2.0,
+        innerColor: {
+          r: this._innerColor[0],
+          g: this._innerColor[1],
+          b: this._innerColor[2]
+        },
+        outerColor: {
+          r: this._outerColor[0],
+          g: this._outerColor[1],
+          b: this._outerColor[2]
+        }
+      });
+
+      map.addImage(this._icon, pulser, {
+        pixelRatio: 1
+      });
+    }
+  }
+}

package/mapboxgl/js/layers/TextLayer.js

@@ -0,0 +1,352 @@
+import DataUtils from "../utils/DataUtils";
+import VerifyUtils from "../utils/VerifyUtils";
+import GeoJsonUtils from "../utils/GeoJsonUtils";
+import LayerUtils from "../utils/LayerUtils";
+
+/**
+ * 定义文本图层
+ * @alias TextLayer
+ * 
+ * @summary <用于点位文本加载>
+ */
+export default class TextLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minZoom = DataUtils.default(options.minZoom, 9);
+
+    /**
+     * 符号位置
+     * @type {String}
+     * 
+     * @summery <取值：point、line、line-center>
+     */
+    this._placement = DataUtils.default(options.placement, 'point');
+    
+    /**
+     * 符号间距
+     * @type {Number}
+     * 
+     * @summery <在options.placement==='line'时生效>
+     */
+    this._spacing = DataUtils.default(options.spacing, 250);
+
+    /**
+     * 字段名
+     * @type {String}
+     */
+    this._textField = DataUtils.default(options.field, 'label');
+
+    /**
+     * 文本大小
+     * @type {Number}
+     */
+    this._textSize = DataUtils.default(options.size, 13);
+
+    /**
+     * 文本偏移
+     * @type {Array}
+     */
+    this._textOffset = DataUtils.default(options.offset, [0, 0]);
+    
+    /**
+     * 文本可移动的锚点
+     * @type {Array}
+     */
+    this._textVariableAnchor = DataUtils.default(options.variableAnchor, ['center']);
+    
+    /**
+     * 文本径向偏移
+     * @type {Number} 
+     */
+    this._textRadialOffset = DataUtils.default(options.radialOffset, 0);
+
+    /**
+     * 文本旋转角度(顺时针)
+     * @type {Number|Array}
+     */
+    this._textRotate = DataUtils.default(options.rotate, 0);
+
+    /**
+     * 文本旋转对齐
+     * @type {String} 
+     */
+    this._textAlignment = DataUtils.default(options.alignment, 'auto');
+
+    /**
+     * 图标是否环绕文字
+     * @type {Boolean}
+     */
+    this._around = DataUtils.default(options.around, false);
+    
+    /**
+     * 是否在3D建筑物图层下面
+     * @type {Boolean}
+     */
+    this._underBuilding = DataUtils.default(options.underBuilding, false);
+
+    /**
+     * 筛选器
+     * @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, 'point_label');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+    
+    // 样式属性数组
+    this._styleProperties = [];
+
+    // 要素集
+    this._fc = GeoJsonUtils.getEmptyFC();
+  }
+  
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {Object|Array} data -GeoJson要素集/要素/要素列表/点位数组
+   * 
+   * @summary <data参数：
+   *   Object - GeoJson要素集/要素
+   *   Array - GeoJson要素数组/点位数组(包含longitude/lng, latitude/lat字段)
+   * >
+   */
+  setData(data) {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this.loadLayer();
+    }
+
+    let fc = GeoJsonUtils.getEmptyFC();
+
+    if (VerifyUtils.isFeatureCollection(data)) { 
+      // 要素集
+      if (data.features && data.features.length > 0) {
+        fc.features = data.features;
+      }
+    } else if (VerifyUtils.isFeature(data)) { 
+      // 要素
+      fc.features = [data];
+    } else if (VerifyUtils.isArray(data) && data.length > 0) {
+      if (VerifyUtils.isFeature(data[0])) {
+        // 要素数组
+        fc.features = data;
+      } else { 
+        // 点位数组
+        fc = GeoJsonUtils.array2PointFC(data);
+      }
+    }
+
+    this._fc.features = [];
+    this._fc.features = fc.features;
+
+    // 更新数据源
+    LayerUtils.updateSource(this._map, this._sourceId, fc);
+    // 显示图层
+    this.showLayer(true);
+  }
+
+  /**
+   * 设置筛选器
+   * @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 = this._filter.length === 1
+                  ? ['all', this._filter]
+                  : [].concat(this._filter);
+    }
+
+    if (filter) {
+      if (!newFilter) {
+        newFilter = filter;
+      } else {
+        newFilter.push(filter);
+      }
+    }
+
+    // 设置筛选器
+    this._map.setFilter(this._layerId, newFilter);
+  }
+
+  /**
+   * 设置绘制属性
+   * @param {String} name -属性名称
+   * @param {String|Object} value -属性值 
+   */
+  setPaintProperty(name, value) {
+    if (!this.hasLayer()) {
+      this._styleProperties.push({ style: 'paint', name: name, value: value });
+      return;
+    }
+
+    this._map.setPaintProperty(this._layerId, name, value);
+  }
+
+  /**
+   * 设置布局属性
+   * @param {String} name -属性名称
+   * @param {String|Object} value -属性值 
+   */
+  setLayoutProperty(name, value) {
+    if (!this.hasLayer()) {
+      this._styleProperties.push({ style: 'layout', name: name, value: value });
+      return;
+    }
+
+    this._map.setLayoutProperty(this._layerId, name, value);
+  }
+
+  /**
+   * 加载图层 
+   */
+  loadLayer() {
+    if (this.hasLayer()) return;
+
+    const map = this._map;
+    const minZoom = this._minZoom;
+
+    const sourceId = this._sourceId;
+    const layerId = this._layerId;
+    if (!LayerUtils.hasSource(map, sourceId)) {
+      // 添加数据源
+      map&&map.addSource(sourceId, {
+        type: "geojson",
+        data: this._dataUrl || GeoJsonUtils.getEmptyFC()
+      });
+    }
+    
+    // 自定义样式
+    const customStyle = map&&map._params.customStyle;
+    // 自定义字体颜色
+    const textColor = customStyle ? customStyle.textColor : '#F8F8FF';
+    const haloColor = customStyle ? customStyle.haloColor : '#8B8B8B';
+    const haloWidth = customStyle ? customStyle.haloWidth : 0.1;
+
+    // 3D建筑物图层ID
+    const buildingLayerId = this._underBuilding 
+                            ? map&&map._params.building3DLayerId 
+                            : undefined;
+    // 添加图层
+    map.addLayer({
+      type: "symbol",
+      id: layerId,
+      source: sourceId,
+      minzoom: minZoom,
+      layout: {
+        "symbol-avoid-edges": true,
+        "symbol-placement": this._placement,
+        "symbol-spacing": this._spacing,
+        "text-font": ["Microsoft YaHei"],
+        "text-field": "{" + this._textField + "}",
+        "text-size": this._textSize,
+        "text-offset": this._textOffset,
+        "text-justify": "auto",
+        "text-max-width": 32,
+        "text-rotate": this._textRotate,
+        "text-rotation-alignment": this._textAlignment,
+        //"text-variable-anchor": this._textVariableAnchor,
+        "text-radial-offset": this._textRadialOffset, 
+        visibility: "none"
+      },
+      paint: {
+        "text-color": textColor,
+        "text-halo-color": haloColor,
+        "text-halo-width": haloWidth,
+      }
+    }, buildingLayerId);
+    
+    // 图标环绕文组
+    if (this._around) {
+      map.setLayoutProperty(layerId, 'icon-text-fit', 'both');
+    }
+
+    // 设置自定义样式
+    if (this._styleProperties.length > 0) {
+      this._styleProperties.forEach(prop => {
+        switch (prop.style) {
+          case 'paint':
+            map.setPaintProperty(layerId, prop.name, prop.value);
+            break;
+          case 'layout':
+            map.setLayoutProperty(layerId, prop.name, prop.value);
+            break;
+          default:
+            break;
+        }
+      });
+    }
+
+    // 设置筛选器
+    if (this._filter) {
+      map.setFilter(layerId, this._filter);
+    }
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} show -是否显示
+   */
+  showLayer(show = true) {
+    LayerUtils.showLayer(this._map, this._layerId, show);
+  }
+
+  /**
+   * 判断图层是否已加载
+   * 
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return LayerUtils.hasLayer(this._map, this._layerId);
+  }
+
+  /**
+   * 移除图层 
+   */
+  removeLayer() {
+    LayerUtils.removeLayer(this._map, this._layerId);
+    this._fc.features = [];
+  }
+
+  /**
+   * 移除数据源
+   */
+  removeSource() {
+    LayerUtils.removeSource(this._map, this._sourceId);
+  }
+}

package/mapboxgl/js/pipe/BufferLayer.js

@@ -0,0 +1,142 @@
+import DataUtils from '../utils/DataUtils';
+import GeogUtils from "../utils/GeogUtils";
+import VerifyUtils from "../utils/VerifyUtils";
+import GeoJsonProvider from "../geog/GeoJsonProvider";
+import SimpleLineLayer from "../common/SimpleLineLayer";
+import SimpleFillLayer from '../common/SimpleFillLayer';
+
+/**
+ * 缓冲区图层
+ * @alias BufferLayer
+ *
+ * @summary <用于缓冲区加载>
+ */
+ export default class BufferLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /**
+     * 填充颜色
+     * @type {String}
+     */
+    this._fillColor = DataUtils.default(options.color, '#00FFF0');
+
+    /**
+     * 外边框颜色
+     * @type {String}
+     */
+    this._lineColor = DataUtils.default(options.lineColor, '#00EEFF');
+
+    // 中心几何图形(点、折线)
+    this._centerGeom = null;
+    // 缓冲区要素集
+    this._fc = GeoJsonProvider.getEmptyFC();
+
+    // 缓冲区数据源
+    this._sourceId = 'polygon_buffer';
+    this._layerId = this._sourceId;
+
+    // 缓冲区边框线数据源
+    this._outlineSourceId = this._sourceId + '-outline';
+    this._outlineLayerId = this._layerId + '-outline';
+
+    // 填充图层
+    this._fillLayer = new SimpleFillLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      color: this._fillColor,
+      opacity: 0.25,
+      sourceId: this._sourceId,
+      layerId: this._layerId
+    });
+    // 边框线图层
+    this._outlineLayer = new SimpleLineLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      opacity: 0.5,
+      width: 2.5,
+      color: this._lineColor,
+      sourceId: this._outlineSourceId,
+      layerId: this._outlineLayerId
+    });
+
+    // 缓冲区外框线图层事件
+    this._enterEvent = null;
+    this._moveEvent = null;
+    this._clickEvent = null;
+  }
+
+  /**
+   * 设置数据
+   * @param {Object} data -GeoJSON要素/要素集
+   * @param {Number} radius -半径 (单位：kilometers)
+   */
+  setData(data, radius = 0.2) {
+    let queryFea;
+    if (VerifyUtils.isGeoJsonFC(data)) {
+      queryFea = data.features[0];
+    } else if (VerifyUtils.isGeoJsonFeature(data)) {
+      queryFea = data;
+    }
+
+    if (!queryFea) return;
+
+    this._centerGeom = queryFea.geometry;
+
+    // 创建缓冲区
+    let buffFea = GeogUtils.buffer(queryFea, radius);
+    this._fc.features = [ buffFea ];
+
+    // 设置数据
+    this._fillLayer.setData(this._fc);
+    this._outlineLayer.setData(this._fc);
+  }
+
+  /**
+   * 获取数据
+   *
+   * @returns {Object}
+   */
+  getData() {
+    return this._fc;
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示图层
+   */
+  showLayer(isShow) {
+    this._fillLayer.showLayer(isShow);
+    this._outlineLayer.showLayer(isShow);
+  }
+
+  /**
+   * 删除图层
+   */
+  removeLayer() {
+    // 移除事件监听
+    this._map.off('mouseenter', this._outlineLayerId, this._enterEvent);
+
+    this._fillLayer.removeLayer();
+    this._outlineLayer.removeLayer();
+
+    this._fillLayer.removeSource();
+    this._outlineLayer.removeSource();
+
+    this._fc.features = [];
+  }
+}