csk-gis-frame-work 4.0.0

package/mapboxgl/js/layers/MarkerLayer.js

@@ -0,0 +1,504 @@
+import DataUtils from "../utils/DataUtils";
+import VerifyUtils from "../utils/VerifyUtils";
+import GeoJsonUtils from "../utils/GeoJsonUtils";
+import LayerUtils from "../utils/LayerUtils";
+import MapUtils from "../utils/MapUtils";
+
+/**
+ * 定义标记点图层
+ * @alias MarkerLayer
+ *
+ * @summary <用于点位数据加载>
+ */
+export default class MarkerLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minZoom = DataUtils.default(options.minZoom, 9);
+
+    /**
+     * 图标(表达式)
+     * @type {String}
+     */
+    this._icon = DataUtils.default(options.icon, 'marker');
+
+    /**
+     * 图标比例
+     * @type {Number}
+     */
+    this._size = DataUtils.default(options.size, 1.0);
+
+    /**
+     * 图标偏移
+     * @type {Array}
+     */
+    this._offset = DataUtils.default(options.offset, [0, 0]);
+
+    /**
+     * 不透明度
+     * @type {Number} (0-1)
+     */
+    this._opacity = DataUtils.default(options.opacity, 1.0);
+
+    /**
+     * 字段名
+     * @type {String}
+     */
+    this._fieldName = DataUtils.default(options.field, undefined);
+
+    /**
+     * 文本大小
+     * @type {Number}
+     */
+    this._textSize = DataUtils.default(options.textSize, 13);
+
+    /**
+     * 文本偏移
+     * @type {Array}
+     */
+    this._textOffset = DataUtils.default(options.textOffset, [0, 1.75]);
+
+    /**
+     * 符号位置
+     * @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 {Boolean}
+     */
+    this._around = DataUtils.default(options.around, false);
+
+    /**
+     * 其它图层排版时是否可忽略本图层文字占位。
+     * true 时其它标注可压在本文本上，易导致与其它图层碰撞后本文本被丢弃（text-optional 时）。
+     * @type {Boolean}
+     */
+    this._textIgnorePlacement = DataUtils.default(options.textIgnorePlacement, true);
+
+    /**
+     * 与其它符号碰撞时是否允许省略文字（Mapbox text-optional）
+     * @type {Boolean}
+     */
+    this._textOptional = DataUtils.default(options.textOptional, true);
+
+    /**
+     * 是否在3D建筑物图层下面
+     * @type {Boolean}
+     */
+    this._underBuilding = DataUtils.default(options.underBuilding, true);
+
+    /**
+     * 筛选器
+     * @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_simple');
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 样式属性数组
+    this._styleProperties = [];
+    // 要素集
+    this._fc = GeoJsonUtils.getEmptyFC();
+
+    // 事件
+    this._enterEvent = null;
+    this._leaveEvent = null;
+    this._clickEvent = null; // 外部实现单击事件
+    // 初始化鼠标事件
+    this._initEvent();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @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;
+    // 3D建筑物图层ID
+    const buildingLayerId = this._underBuilding
+                            ? map&&map._params.building3DLayerId
+                            : undefined;
+    // 添加图层
+    if (this._fieldName) {
+      // 自定义字体颜色
+      const textColor = customStyle ? customStyle.textColor : '#F8F8FF';
+      const haloColor = customStyle ? customStyle.haloColor : '#8B8B8B';
+      const haloWidth = customStyle ? customStyle.haloWidth : 0.1;
+      const haloBlur = customStyle ? customStyle.haloBlur : 0;
+
+      map.addLayer({
+        type: "symbol",
+        id: layerId,
+        source: sourceId,
+        minzoom: minZoom,
+        layout: {
+          "symbol-avoid-edges": true,
+          "symbol-placement": this._placement,
+          "symbol-spacing": this._spacing,
+          "icon-allow-overlap": true,
+          "icon-ignore-placement": true,
+          "icon-image": this._icon,
+          "icon-size": this._size,
+          "icon-offset": this._offset,
+          "text-ignore-placement": this._textIgnorePlacement,
+          "text-optional": this._textOptional,
+          "text-allow-overlap": true,
+          "text-offset": this._textOffset,
+          "text-field": "{" + this._fieldName + "}",
+          "text-size": this._textSize,
+          "text-font": ["Microsoft YaHei"],
+          "text-letter-spacing": 0.02,
+          "text-max-width": 16,
+          visibility: "none"
+        },
+        paint: {
+          "icon-opacity": this._opacity,
+          "text-color": textColor,
+          "text-halo-color": haloColor,
+          "text-halo-width": haloWidth,
+          "text-halo-blur": haloBlur,
+        }
+      }, buildingLayerId);
+    } else {
+      map.addLayer({
+        type: "symbol",
+        id: layerId,
+        source: sourceId,
+        minzoom: minZoom,
+        layout: {
+          "symbol-avoid-edges": true,
+          "symbol-placement": this._placement,
+          "symbol-spacing": this._spacing,
+          "icon-allow-overlap": true,
+          "icon-ignore-placement": true,
+          "icon-image": this._icon,
+          "icon-size": this._size,
+          "icon-offset": this._offset,
+          visibility: "none"
+        },
+        paint: {
+          "icon-opacity": this._opacity
+        }
+      }, buildingLayerId);
+    }
+
+    // 图标环绕文组
+    if (this._fieldName && 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);
+    }
+
+    // 绑定事件
+    this._onEvent();
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} show -是否显示
+   */
+  showLayer(show = true) {
+    LayerUtils.showLayer(this._map, this._layerId, show);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return LayerUtils.hasLayer(this._map, this._layerId);
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    // 解除事件绑定
+    this.offEvent();
+
+    LayerUtils.removeLayer(this._map, this._layerId);
+    this._fc.features = [];
+  }
+
+  /**
+   * 移除数据源
+   */
+  removeSource() {
+    LayerUtils.removeSource(this._map, this._sourceId);
+  }
+
+  /**
+   * 绑定单击事件
+   * @param {Function} event -事件函数
+   */
+  onClick(event) {
+    this._clickEvent = event;
+
+    if (this.hasLayer()) {
+      LayerUtils.onEvent(this._map, this._layerId, 'click', event);
+    }
+  }
+
+  /**
+   * 绑定事件
+   * @param {String} name -事件名称
+   * @param {Function} event -事件函数
+   *
+   * @summary <name参数取值：
+   *   mouseenter-鼠标移入;
+   *   mouseleave-鼠标移除;
+   *   click-鼠标单击
+   * >
+   */
+  onEvent(name, event) {
+    switch (name) {
+      case 'mouseenter': {
+        this._enterEvent = event;
+        break;
+      }
+      case 'mouseleave': {
+        this._leaveEvent = event;
+        break;
+      }
+      case 'click': {
+        this._clickEvent = event;
+        break;
+      }
+      default:
+        return;
+    }
+
+    if (this.hasLayer()) {
+      LayerUtils.onEvent(this._map, this._layerId, name, event);
+    }
+  }
+
+  /**
+   * 解除事件绑定
+   */
+  offEvent() {
+    if (!this.hasLayer()) return;
+
+    const map = this._map;
+    const layerId = this._layerId;
+
+    LayerUtils.offEvent(map, layerId, 'mouseenter', this._enterEvent);
+    LayerUtils.offEvent(map, layerId, 'mouseleave', this._leaveEvent);
+    if (this._clickEvent) {
+      LayerUtils.offEvent(map, layerId, 'click', this._clickEvent);
+    }
+  }
+
+  /** 私有方法 **/
+  /**
+   * 初始化事件
+   */
+  _initEvent() {
+    const map = this._map;
+
+    /**
+     * 移入事件
+     */
+    this._enterEvent = (e) => {
+      MapUtils.setCursor(map, 'pointer');
+    }
+    /**
+     * 移出事件
+     */
+    this._leaveEvent = (e) => {
+      MapUtils.setCursor(map);
+    }
+  }
+
+  /**
+   * 绑定事件
+   */
+  _onEvent() {
+    const map = this._map;
+    const layerId = this._layerId;
+
+    LayerUtils.onEvent(map, layerId, 'mouseenter', this._enterEvent);
+    LayerUtils.onEvent(map, layerId, 'mouseleave', this._leaveEvent);
+    if (this._clickEvent) {
+      LayerUtils.onEvent(map, layerId, 'click', this._clickEvent);
+    }
+  }
+}

package/mapboxgl/js/layers/Pulser.js

@@ -0,0 +1,84 @@
+/**
+ * 脉冲器 
+ */
+function Pulser(options) {
+  /**
+   * 地图对象
+   * @type {Map}
+   * 
+   * @summary <mapboxgl.Map>
+   */
+  let map = options.map;
+  
+  /**
+   * 脉冲半径
+   * @type {Number}
+   */
+  let size = options.size || 60;
+
+  /**
+   * 内圆颜色
+   * @type {Object}
+   * 
+   * @summary <{r:red, g:green, b:blue}>
+   */
+  let innerColor = options.innerColor || {r:255, g:25, b:25};
+  /**
+   * 外圆颜色
+   * @type {Object}
+   * 
+   * @summary <{ r:red, g:green, b:blue}>
+   */
+  let outerColor = options.outerColor || {r:255, g:50, b:50};
+
+  let pulsingDot = {
+    width: size,
+    height: size,
+    data: new Uint8Array(size * size * 4),
+
+    onAdd: function () {
+      let canvas = document.createElement('canvas');
+      canvas.width = this.width;
+      canvas.height = this.height;
+      this.context = canvas.getContext('2d');
+    },
+
+    render: function () {
+      let duration = 1500;
+      let t = (performance.now() % duration) / duration;
+
+      let radius = size / 2 * 0.4;
+      let outerRadius = size / 2 * 0.7 * t + radius;
+      let context = this.context;
+
+      // draw outer circle
+      context.clearRect(0, 0, this.width, this.height);
+      context.beginPath();
+      context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
+      context.fillStyle = 'rgba(' + outerColor.r + ', ' + outerColor.g + ', ' + outerColor.b + ',' + (1 - t) + ')';
+      context.fill();
+
+      // draw inner circle
+      context.beginPath();
+      context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
+      context.fillStyle = 'rgba(' + innerColor.r + ', ' + innerColor.g + ', ' + innerColor.b + ', 0.9)';
+      context.strokeStyle = 'rgba(' + outerColor.r + ', ' + outerColor.g + ', ' + outerColor.b + ', 0.8)';
+      context.lineWidth = 4 + 4 * (1 - t);
+      context.fill();
+      context.stroke();
+
+      // update this image's data with data from the canvas
+      this.data = context.getImageData(0, 0, this.width, this.height).data;
+
+      // keep the map repainting
+      map.triggerRepaint();
+
+      // return `true` to let the map know that the image was updated
+      return true;
+    }
+  };
+
+  return pulsingDot;
+}
+
+export default Pulser;