csk-gis-frame-work 4.0.0

package/mapboxgl/js/drainer/DrainageUnitlineLayer.js

@@ -0,0 +1,154 @@
+import DataUtils from '../utils/DataUtils';
+import SimpleLineLayer from '../common/SimpleLineLayer';
+
+/**
+ * 定义排水单元中心点与排水户线图层
+ *
+ * @alias DrainageUnitlineLayer
+ *
+ * @summary <用于加载排水单元中心点与排水户线图层>
+ */
+ export default class DrainageUnitlineLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 16);
+
+    /**
+     * 线颜色
+     * @type {String}
+     */
+    this._lineColor = DataUtils.default(options.color, '#FFB500');
+
+    /**
+     * 线宽
+     * @type {Number}
+     */
+    this._lineWidth = DataUtils.default(options.width, 7.5);
+
+    /**
+     * 透明度
+     * @type {Number} (0-1)
+     */
+    this._lineOpacity = DataUtils.default(options.opacity, 1.0);
+
+     /**
+     * 虚线
+     * @type {Array}
+     */
+     this._dasharray = DataUtils.default(options.dasharray, [10,5]);
+
+    /**
+     * 过滤条件数组
+     * @type {Array}
+     */
+    this._filter = DataUtils.default(options.filter, undefined);
+
+    /**
+     * 数据源ID
+     * @typr {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, 'pipe_unitline');
+
+    /**
+     * 图层ID
+     * @typr {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    /* 图层对象 */
+    this._lineLayer = new SimpleLineLayer({
+      map: this._map,
+      minzoom: this._minzoom,
+      color: this._lineColor,
+      width: this._lineWidth,
+      opacity: this._lineOpacity,
+      filter: this._filter,
+      sourceId: this._sourceId,
+      layerId: this._layerId,
+      dasharray:this._dasharray
+
+    });
+  }
+
+  /** 公有方法 **/
+   /**
+   * 设置数据
+   * @param {Array|Object} data -数据
+   */
+    setData(data = null) {
+        // 加载图层
+        this.loadLayer();
+        if (data) {
+          this._lineLayer.setData(data);
+        }
+      }
+
+
+
+  /**
+   * 设置筛选器
+   * @param {Array} filter -筛选器
+   */
+  setFilter(filter) {
+    this._lineLayer.setFilter(filter);
+  }
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this._lineLayer.loadLayer();
+    }
+
+    // 显示图层
+    this.showLayer(true);
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示图层
+   */
+  showLayer(isShow) {
+    this._lineLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return this._lineLayer.hasLayer();
+  }
+
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._lineLayer.removeLayer();
+  }
+
+  /**
+   * 移除数据源
+   */
+  removeSource() {
+    this._lineLayer.removeSource();
+  }
+
+}

package/mapboxgl/js/drainer/DrainageUnitlineProvider.js

@@ -0,0 +1,140 @@
+import DataUtils from "../utils/DataUtils";
+import GeogUtils from "../utils/GeogUtils";
+import GeoJsonProvider from "../geog/GeoJsonProvider";
+
+import DrainageUnitlineLayer from "./DrainageUnitlineLayer";
+import DrainageUnitFlowLayer from "./DrainageUnitFlowLayer";
+
+/**
+ * 定义排水单元排水户连接图层提供类
+ *
+ * @alias DrainageUnitlineProvider
+ */
+export default class DrainageUnitlineProvider {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 16);
+
+    /* 图层对象 */
+    this._lineLayer = null;      // 排水单元排水户连接
+    this._flowLayer = null;      // 流向
+     // 线中心点要素集
+     this._centerPointFC = GeoJsonProvider.getEmptyFC();
+
+    // 初始化图层
+    this._initLayers();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {Array|Object} data -数据
+   */
+  setData(data = null) {
+    this._lineLayer.setData(data);
+    const centerFC = this._centerPointFC;
+    centerFC.features = data.features.map((fea) => {
+      // 获取线中点要素
+      const coordinates = GeogUtils.calcCenter(fea);
+      // 计算线的方位角
+        let coordsLen = fea.geometry.coordinates.length;
+        let startLonLat = fea.geometry.coordinates[0];
+        let endLonLat = fea.geometry.coordinates[coordsLen - 1];
+        // 计算方位角
+        fea.properties.bearing = GeogUtils.bearing(startLonLat, endLonLat);
+
+      return GeoJsonProvider.getPointFeature(coordinates, fea.properties);
+    });
+    this._flowLayer.setData(centerFC);
+  }
+
+  /**
+   * 设置过滤器
+   * @param {Array} filter -过滤器
+   */
+  setFilter(filter) {
+    this._lineLayer.setFilter(filter);
+    this._flowLayer.setFilter(filter);
+  }
+
+  /**
+   * 加载图层
+   */
+  loadLayer() {
+
+    this._lineLayer.loadLayer();
+    this._flowLayer.loadLayer();
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示图层
+   */
+  showLayer(isShow) {
+    this._lineLayer.showLayer(isShow);
+    this._flowLayer.showLayer(isShow);
+  }
+
+  /**
+   * 判断是否已加载图层
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return (this._lineLayer.hasLayer()&&
+    this._flowLayer.hasLayer());
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    this._lineLayer.removeLayer();
+    this._flowLayer.removeLayer();
+  }
+
+  /**
+   * 移除所有图层(销毁时调用)
+   */
+  removeAllLayers() {
+    // 排水单元排水户连接
+    this._lineLayer.removeLayer();
+    this._lineLayer.removeSource();
+    this._flowLayer.removeLayer();
+    this._flowLayer.removeSource();
+  }
+
+  /** 私有方法 **/
+  /**
+   * 初始化图层
+   */
+  _initLayers() {
+    const map = this._map;
+    const minZoom = this._minzoom;
+
+    // 排水单元排水户连接
+    this._lineLayer = new DrainageUnitlineLayer({
+      map: map,
+      minzoom: minZoom +6.0
+    });
+
+     // 雨污混接流向
+     this._flowLayer = new DrainageUnitFlowLayer({
+      map: map,
+      minzoom: minZoom + 6.0
+    });
+  }
+}

package/mapboxgl/js/drainer/DrainerSearchProvider.js

@@ -0,0 +1,274 @@
+import DataUtils from "../utils/DataUtils";
+import IconProvider from "../geog/IconProvider";
+import GeoJsonProvider from "../geog/GeoJsonProvider";
+import MapProvider from "../geog/MapProvider";
+import LayerProvider from "../geog/LayerProvider";
+
+import { getApi } from '../../api/http';
+
+/**
+ * 定义排水户搜索提供类
+ *
+ * @alias DrainerSearchProvider
+ * @constructor
+ *
+ * @param options -搜索选项
+ */
+function DrainerSearchProvider(options) {
+	'use strict';
+
+	/**
+	 * 地图对象
+	 * @type {Object}
+	 */
+	this._map = options.map;
+
+	/**
+	 * 最小缩放层级
+	 * @type {Number}
+	 */
+	this._minzoom = DataUtils.default(options.minzoom, 10);
+	/**
+	 * 最大缩放层级
+	 * @type {Number}
+	 */
+	this._maxzoom = DataUtils.default(options.maxzoom, 19);
+
+	/**
+	 * 排水户点数据源Id
+	 * @type {String}
+	 */
+	this._sourceId = options.sourceId;
+
+	// 搜索器数据源Id
+	this._searchSourceId = this._sourceId + '-searcher';
+	// 搜索器图层Id
+	this._searchLayerId = this._searchSourceId;
+
+	this._prefix = '';  // 搜索前缀
+	this._targets = []; // 搜索目标要素集合
+
+	// 事件
+	this._layerEnterEvent = null;
+	this._layerLeaveEvent = null;
+	this._layerClickEvent = null; // 外部实现单击事件
+	// 初始化鼠标事件
+	this._initEvent();
+}
+
+/**
+ * 加载图层
+ * @param {String} category -类型
+ * @param {String} prefix -搜索前缀
+ */
+DrainerSearchProvider.prototype.filterLayer = function (category, prefix) {
+	if (!this.hasLayer()) {
+		this.loadLayer(category); // 加载图层
+	}
+
+	if (!prefix || prefix.length === 0) {
+		this.showLayer(false);
+	}
+
+	let source = this._map.getSource(this._sourceId);
+	if (!source) {
+		return catchError();
+	}
+
+	// 规范化
+	prefix = normalize(prefix);
+
+	let that = this;
+	let data = null;
+	let map = this._map;
+
+	// 返回空数组
+  async function catchError() {
+    return [];
+  }
+
+	/**
+	 * 规范化
+	 */
+	function normalize(str) {
+		return str.trim();
+	}
+
+	/**
+	 * 是否需要查询数据源
+	 *
+	 * @returns {Boolean}
+	 */
+	function needQuerySource() {
+		if (that._prefix.length === 0 ||
+			that._targets.length === 0) {
+			return true;
+		}
+
+		if (prefix.indexOf(that._prefix) < 0) {
+			return true;
+		}
+
+		return false;
+	}
+
+	/**
+	 * 查询排水户
+	 */
+	async function searchDrainers() {
+		if (needQuerySource()) {
+			let url = source._data + '&viewparams=keywords:' + prefix;
+			// 查询排水户
+			let result = await getApi(url);
+			if (result.data) {
+				data = result.data;
+				// 更新数据源
+				map.getSource(that._searchSourceId).setData(data);
+			}
+
+			that._prefix = prefix;
+			that._targets = [];
+			// 查询数据源要素集合
+			let features = that._map.querySourceFeatures({
+				layers: [that._searchSourceId]
+			});
+			if (features.length === 0) {
+				features = data.features;
+			}
+
+			if (features && features.length > 0) {
+				that._targets = GeoJsonProvider.getUniqueFeatures(features, 'drain_name');
+			}
+		}
+
+		// Filter visible features that don't match the input value.
+		let filtered = that._targets.filter((feature) => {
+			var name = normalize(feature.properties.drain_name);
+			return name.indexOf(prefix) > -1;
+		});
+
+		if (filtered.length > 0) {
+			// Set the filter to populate features into the layer.
+			map.setFilter(that._searchLayerId,
+				['match',
+					['get', 'drain_name'],
+					filtered.map((feature) => {
+						return feature.properties.drain_name
+					}),
+					true,
+					false
+				]
+			);
+
+			// 显示图层
+			that.showLayer(true);
+		}
+
+		return filtered;
+	}
+
+	return searchDrainers();
+}
+
+/**
+ * 加载图层
+ * @param {String} category -类型
+ */
+DrainerSearchProvider.prototype.loadLayer = function (category) {
+	// 移除图层
+	this.removeLayer();
+
+	const source = this._map.getSource(this._sourceId);
+	if (!source) return;
+
+	const map = this._map;
+	// 添加数据源
+	map.addSource(this._searchSourceId, {
+		type: "geojson",
+		data: {
+			type: "FeatureCollection",
+			features: []
+		}
+	});
+
+	// 获取图标表达式
+	let iconExpression = IconProvider.getDrainerIconExpression(category);
+	// 添加图层
+	map.addLayer({
+		type: "symbol",
+		id: this._searchLayerId,
+		source: this._searchSourceId,
+		minzoom: this._minzoom,
+		layout: {
+			"symbol-placement": "point",
+			"symbol-avoid-edges": true,
+			"icon-image": iconExpression,
+			"icon-allow-overlap": true,
+			"icon-ignore-placement": true,
+			visibility: "visible"
+		},
+		paint: {
+			"icon-opacity": 0.8
+		}
+	});
+
+	// 绑定事件
+	map.on('mouseenter', this._searchLayerId, this._layerEnterEvent);
+	map.on('mouseleave', this._searchLayerId, this._layerLeaveEvent);
+}
+
+/**
+ * 移除图层
+ */
+DrainerSearchProvider.prototype.removeLayer = function () {
+	const map = this._map;
+
+	// 解除事件绑定
+	if (this.hasLayer()) {
+		LayerProvider.offEvent(map, this._searchLayerId, 'mouseenter', this._layerEnterEvent);
+    LayerProvider.offEvent(map, this._searchLayerId, 'mouseleave', this._layerLeaveEvent);
+    if (this._layerClickEvent) {
+      LayerProvider.offEvent(map, this._searchLayerId, 'click', this._layerClickEvent);
+    }
+	}
+
+	// 移除图层
+	LayerProvider.removeLayer(map, this._searchLayerId);
+	// 移除数据源
+	LayerProvider.removeSource(map, this._searchSourceId);
+}
+
+/**
+ * 显示/隐藏图层
+ * @param {Boolean} isShow -是否显示
+ */
+DrainerSearchProvider.prototype.showLayer = function (isShow = true) {
+	LayerProvider.showLayer(this._map, this._searchLayerId, isShow);
+}
+
+/**
+ * 图层是否已加载
+ * @returns {Boolean}
+ */
+DrainerSearchProvider.prototype.hasLayer = function () {
+	return LayerProvider.hasLayer(this._map, this._searchLayerId);
+}
+
+/**
+ * 初始化默认事件
+ */
+DrainerSearchProvider.prototype._initEvent = function () {
+	const map = this._map;
+  // 鼠标事件
+  function onMouseEnter() {
+		MapProvider.setCursor(map, 'pointer');
+  }
+  function onMouseLeave() {
+		MapProvider.setCursor(map);
+  }
+
+  this._layerEnterEvent = onMouseEnter;
+  this._layerLeaveEvent = onMouseLeave;
+}
+
+export default DrainerSearchProvider;