csk-gis-frame-work 4.0.0

package/mapboxgl/js/utils/LayerUtils.js

@@ -0,0 +1,160 @@
+/**
+ * 图层工具类 
+ */
+const LayerUtils = {
+  /**
+   * 判断数据源是否加载
+   * @param {Object} map -地图对象
+   * @param {String} id -数据源Id
+   * 
+   * @returns {Boolean}
+   */
+  hasSource(map, id) {
+    if (map&&map.getSource(id)) {
+      return true;
+    }
+
+    return false;
+  },
+
+  /**
+   * 设置数据源
+   * @param {Object} map -地图对象
+   * @param {String} id -数据源Id
+   * @param {String|Object} data -数据源
+   * 
+   * @summary <data参数：数据的url或GeoJSON对象>
+   */
+  updateSource(map, id, data) {
+    if (map&&map.getSource(id)) {
+      map.getSource(id).setData(data);
+    }
+  },
+
+  /**
+   * 移除数据源
+   * @param {Object} map -地图对象
+   * @param {String} id -数据源Id
+   */
+  removeSource(map, id) {
+    if (map&&map.getSource(id)) {
+      map.removeSource(id);
+    }
+  },
+
+  /**
+   * 判断图层是否加载
+   * @param {Object} map -地图对象
+   * @param {String} id -图层Id
+   * 
+   * @returns {Boolean}
+   */
+  hasLayer(map, id) {
+    if (map&&map.getLayer(id)) {
+      return true;
+    }
+
+    return false;
+  },
+
+  /**
+   * 判断图层是否可见
+   * @param {Object} map -地图对象
+   * @param {String} id -图层Id
+   * 
+   * @returns {Boolean}
+   */
+  isLayerVisible(map, id) {
+    return (
+      this.hasLayer(map, id) &&
+      'visible' === map.getLayoutProperty(id, 'visibility')
+    );
+  },
+
+  /**
+   * 过滤图层
+   * @param {Object} map -地图对象
+   * @param {String} id -图层Id
+   * @param {Array} filter -过滤数组
+   * 
+   * @summary <filter参数示例：['==', 'fld', 'val']>
+   */
+  filterLayer(map, id, filter) {
+    if (!map.getLayer(id)) return;
+
+    map.setFilter(id, filter);
+  },
+
+  /**
+   * 显示/隐藏图层
+   * @param {Object} map -地图对象
+   * @param {String} id -图层Id
+   * @param {Boolean} show -是否显示
+   */
+  showLayer(map, id, show = true) {
+    let visible = show ? 'visible' : 'none';
+    if (map&&map.getLayer(id)) {
+      map.setLayoutProperty(id, 'visibility', visible);
+    }
+  },
+
+  /**
+   * 移动图层
+   * @param {Object} map -地图对象
+   * @param {String} id -需要移动的图层Id
+   * @param {String} beforeId -现有图层Id
+   * 
+   * @summary <id图层将显示到beforeId图层之下>
+   */
+  moveLayer(map, id, beforeId) {
+    if (map&&map.getLayer(id)) {
+      map.moveLayer(id, beforeId);
+    }
+  },
+
+  /**
+   * 移除图层
+   * @param {Object} map -地图对象
+   * @param {String} id -图层Id
+   */
+  removeLayer(map, id) {
+    if (map&&map.getLayer(id)) {
+      map.removeLayer(id);
+    }
+  },
+
+  /**
+   * 绑定事件
+   * @param {Object} map -地图对象
+   * @param {String} layerId -图层Id 
+   * @param {String} name -事件
+   * @param {function} event -函数对象
+   */
+  onEvent(map, layerId, name, event) {
+    map.on(name, layerId, event);
+  },
+
+  /**
+   * 解除事件绑定
+   * @param {Object} map -地图对象
+   * @param {String} layerId -图层Id 
+   * @param {String} name -事件
+   * @param {function} event -函数对象
+   */
+  offEvent(map, layerId, name, event) {
+    map.off(name, layerId, event);
+  },
+  
+  /**
+   * 绑定仅响应一次的事件
+   * @param {Object} map -地图对象
+   * @param {String} layerId -图层Id 
+   * @param {String} name -事件
+   * @param {function} event -函数对象
+   */
+  onceEvent(map, layerId, name, event) {
+    map.once(name, layerId, event);
+  }
+}
+
+export default LayerUtils;

package/mapboxgl/js/utils/MapUtils.js

@@ -0,0 +1,128 @@
+import mapboxgl from "mapbox-gl";
+
+/**
+ * 地图工具类
+ */
+const MapUtils = {
+  /* 坐标转换 */
+  /**
+   * 经纬度转WebGL坐标
+   * @param {Number[]} lonLat -经纬度坐标
+   * @param {Number} alt -高程
+   *
+   * @returns {x:x, y:y, z:z}
+   */
+  toPosition(lonLat, alt = 0) {
+    return mapboxgl.MercatorCoordinate.fromLngLat({
+      lng: lonLat[0],
+      lat: lonLat[1]
+    }, alt ? alt : 0);
+  },
+
+  /**
+   * 经纬度转屏幕坐标(像素)
+   * @param {Object} map -地图对象
+   * @param {Number[]} lonLat -经纬度坐标
+   *
+   * @returns {x:x, y:y}
+   */
+  toPixel(map, lonLat) {
+    return map.project(lonLat);
+  },
+
+  /**
+   * 屏幕坐标转经纬度
+   * @param {Object} map -地图对象
+   * @param {Number[] | Object} xy -屏幕坐标
+   */
+  toCoordinates(map, xy) {
+    return map.unproject(xy);
+  },
+  /* */
+
+  /**
+   * 设置鼠标样式
+   * @param {Object} map -地图对象
+   * @param {String} cursor -鼠标样式
+   */
+  setCursor(map, cursor = '') {
+    if (map.getCanvas().style.cursor !== 'crosshair') {
+      map.getCanvas().style.cursor = cursor;
+    }
+  },
+
+  /**
+   * 将对应图层移动至最顶层
+   * @param map
+   * @param targetId
+   */
+  moveToTop(map,targetId) {
+    map.moveLayer(targetId)
+  },
+
+  /**
+   * 绑定事件
+   * @param {Object} map -地图对象
+   * @param {String} name -事件名
+   * @param {function} event -函数对象
+   */
+  onEvent(map, name, event) {
+    map.on(name, event);
+  },
+
+  /**
+   * 解除事件绑定
+   * @param {Object} map -地图对象
+   * @param {String} name -事件名
+   * @param {function} event -函数对象
+   */
+  offEvent(map, name, event) {
+    map.off(name, event);
+  },
+
+  /**
+   * 绑定仅响应一次的事件
+   * @param {Object} map -地图对象
+   * @param {String} name -事件名
+   * @param {function} event -函数对象
+   */
+  onceEvent(map, name, event) {
+    map.once(name, event);
+  },
+
+  /**
+   * 适应边界框
+   * @param {Object} map -地图对象
+   * @param {Number[][]} bbox -边界盒
+   * @param {Boolean} jump -是否直接定位
+   */
+  fitBounds(map, bbox, jump = false) {
+    map.fitBounds(bbox, {
+      animate: !jump,
+      pitch: map.getPitch(),
+      bearing: map.getBearing(),
+      padding: 20,
+    });
+  },
+
+  /**
+   * 缩放至边界框
+   * @param {Object} map -地图对象
+   * @param {Number[][]} bbox -边界盒
+   * @param {Number} zoom -缩放层级
+   * @param {Boolean} jump -是否直接定位
+   */
+  zoomToBounds(map, bbox, zoom, jump = false) {
+    const currZoom = map.getZoom();
+
+    map.fitBounds(bbox, {
+      animate: !jump,
+      pitch: map.getPitch(),
+      bearing: map.getBearing(),
+      padding: 20,
+      maxZoom: zoom > currZoom ? zoom : currZoom
+    });
+  }
+}
+
+export default MapUtils;

package/mapboxgl/js/utils/NetworkUtils.js

@@ -0,0 +1,21 @@
+/**
+ * 网络工具类
+ */
+const NetworkUtils = {
+  /**
+   * 是否公网
+   * @param {Object} config -配置对象
+   *
+   * @returns {Boolean}
+   */
+  isPublic(config) {
+    // 获取主机地址 kaifa.hc-yun.com
+    let hostname = window.location.hostname;
+    //console.log('Hostname:', hostname);
+
+    let mapUrl2 = config.mapUrl2;
+    return mapUrl2.indexOf(hostname) > -1;
+  },
+}
+
+export default NetworkUtils;

package/mapboxgl/js/utils/PipenetUtils.js

@@ -0,0 +1,100 @@
+import GeoJsonProvider from "../geog/GeoJsonProvider";
+
+/**
+ * 合并管网分析结果
+ * @param {Array} features -要素集合
+ *
+ * @returns {Array} 合并后的管段要素数组
+ */
+export function pipenetMergeAnalystResult(features) {
+  const resultFeatures = [];
+
+  if (features && features.length) {
+    // 起始要素
+    let startFeature = GeoJsonProvider.getLineStringFeature(features[0].geometry.coordinates, {
+      source: features[0].properties.source,
+      target: features[0].properties.target,
+      path: features[0].properties.path,
+    });
+    features[0].properties.ignored = true;
+    // 添加到结果要素数组
+    resultFeatures.push(startFeature);
+
+    for (let i = 1; i < features.length; i++) {
+      const feature = features[i];
+      if (feature.properties.ignored) continue;
+
+      let filteredFeas = filterFeatures(features, startFeature);
+      while (filteredFeas.length === 1) {
+        const filteredFea = filteredFeas[0];
+        filteredFea.properties.ignored = true;
+
+        switch (filteredFea.properties.updown) {
+          case 'up': { // 上游
+            // 坐标插入到当前要素坐标列表最前面
+            startFeature.geometry.coordinates = filteredFea.geometry.coordinates.concat(startFeature.geometry.coordinates);
+            startFeature.properties.source = filteredFea.properties.source;
+            startFeature.properties.path = filteredFea.properties.source + '-' + startFeature.properties.path;
+
+            break;
+          }
+          case 'down': { // 下游
+            // 坐标添加到当前要素坐标列表最后面
+            startFeature.geometry.coordinates = startFeature.geometry.coordinates.concat(filteredFea.geometry.coordinates);
+            startFeature.properties.target = filteredFea.properties.target;
+            startFeature.properties.path = startFeature.properties.path + '-' + filteredFea.properties.target;
+
+            break;
+          }
+          default:
+            break;
+        }
+
+        filteredFeas = filterFeatures(features, startFeature);
+      }
+
+      if (!feature.properties.ignored) {
+        // 获取新的起始要素
+        startFeature = GeoJsonProvider.getLineStringFeature(feature.geometry.coordinates, {
+          source: feature.properties.source,
+          target: feature.properties.target,
+          path: feature.properties.path,
+        });
+        feature.properties.ignored = true;
+        // 添加到结果要素数组
+        resultFeatures.push(startFeature);
+      }
+    } // end of for (let i = 1; i < features.length; i++)
+  }
+
+  /**
+   * 过滤管网要素
+   */
+  function filterFeatures(features, feature) {
+    // 上游
+    let fiteredFeas = features.filter((fea) => {
+      return !fea.properties.ignored &&
+             fea.properties.target === feature.properties.source
+    });
+    if (fiteredFeas.length > 0) {
+      if (fiteredFeas.length === 1) {
+        fiteredFeas[0].properties.updown = 'up';
+      }
+
+      return fiteredFeas;
+    }
+
+    // 下游
+    fiteredFeas = features.filter((fea) => {
+      return !fea.properties.ignored &&
+             fea.properties.source === feature.properties.target
+    });
+    if (fiteredFeas.length === 1) {
+      fiteredFeas[0].properties.updown = 'down';
+    }
+
+    return fiteredFeas;
+  }
+
+  return resultFeatures;
+}

package/mapboxgl/js/utils/ProjUtils.js

@@ -0,0 +1,32 @@
+import proj4 from "proj4"
+
+/**
+ * 坐标转换工具类
+ */
+const ProjUtils = {
+  // 3857
+  WebMercator: '+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs',
+  // 4326
+  WGS84: '+proj=longlat +datum=WGS84 +no_defs +type=crs',
+
+  // 4490
+  CGCS2000: '+proj=longlat +ellps=GRS80 +no_defs +type=crs',
+
+  // 佛山2000坐标系proj4字符串
+  FS2000: '+proj=tmerc +lat_0=0 +lon_0=113 +k=1 +x_0=700000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs',
+
+  /**
+   * 4490转fs2000
+   * @param {Number[]} lonLat -经纬度坐标
+   *
+   * @returns {Number[]} 投影坐标
+   */
+  toFs2000(lonLat) {
+    return proj4(this.CGCS2000, this.FS2000, lonLat);
+  },
+  toCGCS2000(lonLat) {
+    return proj4(this.FS2000, this.CGCS2000, lonLat);
+  },
+};
+
+export default ProjUtils;

package/mapboxgl/js/utils/SpatialRefUtils.js

@@ -0,0 +1,198 @@
+/**
+ * 空间参考系工具类
+ */
+ const SpatialRefUtils = {
+  // 定义一些常量
+  X_PI: 3.1415926535897932384626 * 3000.0 / 180.0,
+  PI: 3.1415926535897932384626,
+  A: 6378245.0,
+  EE: 0.00669342162296594323,
+
+  /** 外部调用方法 **/
+  /**
+   * 百度坐标系(BD-09)转大地2000坐标系(CGCS2000)
+   * @param {Number[]} lonLat -百度坐标系经纬度
+   *
+   * @returns {Number[]}
+   */
+  bd09ToCgcs2000(lonLat) {
+    // 百度转火星
+    const gcj02LonLat = this.bd09ToGcj02(lonLat);
+
+    // 火星转WGS84
+    return this.gcj02toWgs84(gcj02LonLat);
+  },
+
+  /**
+   * 大地2000坐标系(CGCS2000)转百度坐标系(BD-09)
+   * @param {Number[]} lonLat -大地2000坐标系经纬度
+   *
+   * @returns {Number[]}
+   */
+  cgcs2000ToBd09(lonLat) {
+    // WGS84转火星
+    const gcj02LonLat = this.wgs84toGcj02(lonLat);
+
+    // 火星转百度
+    return this.gcj02tobd09(gcj02LonLat);
+  },
+
+  /** 公有方法 **/
+  /**
+   * 百度坐标系(BD-09)转火星坐标系(GCJ-02)
+   * 即 百度 转 谷歌、高德
+   * @param {Number[]} lonLat -经纬度
+   *
+   * @returns {Number[]}
+   */
+  bd09ToGcj02(lonLat) {
+    const x_pi = this.X_PI;
+
+    let x = lonLat[0] - 0.0065;
+    let y = lonLat[1] - 0.006;
+    let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
+
+    let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
+    var gcj_lng = z * Math.cos(theta);
+    var gcj_lat = z * Math.sin(theta);
+
+    return [gcj_lng, gcj_lat];
+  },
+
+  /**
+   * 火星坐标系(GCJ-02)转百度坐标系(BD-09)
+   * 即谷歌、高德 转 百度
+   * @param {Number[]} lonLat -经纬度
+   *
+   * @returns {Number[]}
+   */
+  gcj02tobd09(lonLat) {
+    const x_pi = this.X_PI;
+
+    let lng = lonLat[0];
+    let lat = lonLat[1];
+    var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_pi);
+
+    var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_pi);
+    var bd_lng = z * Math.cos(theta) + 0.0065;
+    var bd_lat = z * Math.sin(theta) + 0.006;
+
+    return [bd_lng, bd_lat]
+  },
+
+  /**
+   * WGS84转火星坐标系(GCJ-02)
+   * @param {Number[]} lonLat -经纬度
+   *
+   * @returns {Number[]}
+   */
+  wgs84toGcj02(lonLat) {
+    let lng = lonLat[0];
+    let lat = lonLat[1];
+    if (this._isOutofChina(lng, lat)) {
+      return lonLat;
+    }
+
+    const pi = this.PI;
+    const ee = this.EE;
+    const a = this.A;
+
+    let dlat = this._transformLat(lng - 105.0, lat - 35.0);
+    let dlng = this._transformLng(lng - 105.0, lat - 35.0);
+    let radlat = lat / 180.0 * pi;
+    let magic = Math.sin(radlat);
+    magic = 1 - ee * magic * magic;
+
+    let sqrtmagic = Math.sqrt(magic);
+    dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * pi);
+    dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * pi);
+
+    let gcjLng = lng + dlng;
+    let gcjLat = lat + dlat;
+
+    return [gcjLng, gcjLat];
+  },
+
+  /**
+   * 火星坐标系(GCJ02)转WGS84
+   * @param {Number[]} lonLat -经纬度
+   *
+   * @returns {Number[]}
+   */
+  gcj02toWgs84(lonLat) {
+    let lng = lonLat[0];
+    let lat = lonLat[1];
+    if (this._isOutofChina(lng, lat)) {
+      return lonLat;
+    }
+
+    const pi = this.PI;
+    const ee = this.EE;
+    const a = this.A;
+
+    let dlat = this._transformLat(lng - 105.0, lat - 35.0);
+    let dlng = this._transformLng(lng - 105.0, lat - 35.0);
+    let radlat = lat / 180.0 * pi;
+    let magic = Math.sin(radlat);
+    magic = 1 - ee * magic * magic;
+
+    let sqrtmagic = Math.sqrt(magic);
+    dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * pi);
+    dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * pi);
+
+    let mglat = lat + dlat;
+    let mglng = lng + dlng;
+
+    return [lng * 2 - mglng, lat * 2 - mglat]
+  },
+
+  /** 私有方法 **/
+  /**
+   * 是否超出中国范围
+   * @param {Number} lng -经度
+   * @param {Number} lat -纬度
+   *
+   * @returns {Boolean}
+   */
+  _isOutofChina(lng, lat) {
+    return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
+  },
+
+  /**
+   * 转换纬度
+   * @param {Number} lng -经度
+   * @param {Number} lat -纬度
+   *
+   * @returns {Number} 纬度
+   */
+  _transformLat(lng, lat) {
+    const pi = this.PI;
+
+    let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
+    ret += (20.0 * Math.sin(6.0 * lng * pi) + 20.0 * Math.sin(2.0 * lng * pi)) * 2.0 / 3.0;
+    ret += (20.0 * Math.sin(lat * pi) + 40.0 * Math.sin(lat / 3.0 * pi)) * 2.0 / 3.0;
+    ret += (160.0 * Math.sin(lat / 12.0 * pi) + 320 * Math.sin(lat * pi / 30.0)) * 2.0 / 3.0;
+
+    return ret;
+  },
+
+  /**
+   * 转换经度
+   * @param {Number} lng -经度
+   * @param {Number} lat -纬度
+   *
+   * @returns {Number} 经度
+   */
+  _transformLng(lng, lat) {
+    const pi = this.PI;
+
+    let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
+    ret += (20.0 * Math.sin(6.0 * lng * pi) + 20.0 * Math.sin(2.0 * lng * pi)) * 2.0 / 3.0;
+    ret += (20.0 * Math.sin(lng * pi) + 40.0 * Math.sin(lng / 3.0 * pi)) * 2.0 / 3.0;
+    ret += (150.0 * Math.sin(lng / 12.0 * pi) + 300.0 * Math.sin(lng / 30.0 * pi)) * 2.0 / 3.0;
+
+    return ret;
+  }
+}
+
+export default SpatialRefUtils;