csk-gis-frame-work 4.0.0

package/baseSetting/style/DevMapConfig.js

@@ -0,0 +1,33 @@
+/**
+ * 开发环境2D/2.5D底图配置
+ */
+const DevMapConfig = {
+    projection_from: 'gcj02',
+    projection_to: 'wgs84'
+}
+
+/**
+ * 深色样式
+ */
+const Dark_Style = {
+    textColor: '#F8F8FF',
+    haloColor: '#8B8B8B',
+    haloWidth: 0.1,
+    haloBlur: 0,
+
+    boundaryColor: '#92FBE2', // 区域边界颜色  FFD188
+}
+
+/**
+ * 浅色地图样式
+ */
+const Light_Style = {
+    textColor: '#191970',
+    textHaloWidth: 0.25,
+    boundary_lineColor: '#4169E1',
+}
+
+export {
+    Dark_Style, Light_Style,
+    DevMapConfig
+};

package/baseSetting/style/getDefaultFonts.py

@@ -0,0 +1,23 @@
+import requests
+import os
+
+base_url = 'https://iserver.supermap.io/iserver/services/map-beijing/rest/maps/beijingMap/tileFeature/sdffonts/Open%20Sans%20Regular,Arial%20Unicode%20MS%20Regular/'
+filename_template = '{}-{}.pbf'
+download_dir = 'E:/work_space/项目文件/wp-fed-mango/code/web/src/components/gis/style/fonts/Open Sans Regular,Arial Unicode MS Regular'
+
+for start in range(0, 65536, 256):
+    end = start + 255
+    url = base_url + filename_template.format(start, end)
+    filename = filename_template.format(start, end)
+
+    response = requests.get(url)
+
+    if response.status_code == 200:
+        filepath = os.path.join(download_dir, filename)
+        with open(filepath, 'wb') as f:
+            f.write(response.content)
+            print(f"Downloaded {filename} ({len(response.content)} bytes)")
+    else:
+        print(
+            f"Failed to download {filename} ({response.status_code} {response.reason})")
+

package/baseSetting/utils/TokenUtils.js

@@ -0,0 +1,15 @@
+/**
+ * Token工具
+ */
+let TokenUtils = {
+    /*mapbox_token*/
+    MapboxGL_AccessToken: 'pk.eyJ1IjoibWFvc2hvdWJlaSIsImEiOiJjbXBuczN0aTQwYjljMnNxMXU4c2YzcW4xIn0.ICGHgTS58yapJ7NfUucwhg',
+    // mapbox_accessToken: "pk.eyJ1IjoibWFvc2hvdWJlaSIsImEiOiJja3l0d3NjazAxaHA2MzFsdWJpaTV3cnIzIn0.fFILZMJuHvw2v2dPnrINaA",
+
+    /*cesium_token*/
+    Cesium_AccessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2OTgxNTY1Ni05ZWQzLTQ5OWMtODVlMS1kZTQyNzE5ODkyMzYiLCJpZCI6MTUzNDgsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyJdLCJpYXQiOjE1Njc2NTMzMzZ9.lgaMvwkiWOimFhfJ4dgfNmKZDfjqIPaAfg0ycjwFTfc',
+    /*天地图企业token*/
+    TDT_token: '7ecf165a6717ea33c926889518f26fa4'
+}
+
+export default TokenUtils;

package/index.js

@@ -0,0 +1,42 @@
+/**
+ * gis-frame-work — GIS地图框架工具集
+ * ==========================================
+ * 统一入口，按模块导出所有功能
+ *
+ * 使用方式：
+ *   import { mapbox, mapboxNative, mapgis, baseSetting } from 'gis-frame-work';
+ *
+ * 或按路径引用：
+ *   import mapboxUtils from 'gis-frame-work/mapboxgl/utils/mapbox';
+ *   import MapboxNative from 'gis-frame-work/mapboxgl/utils/mapbox_native';
+ */
+
+// ==================== 配置与数据层 ====================
+export { default as mapConfig } from './baseSetting/config/mapConfig';
+export {
+    base_sources,
+    business_layers,
+    business_sources,
+    Dark_Layers,
+    Dark_Sources,
+    Image_Layers,
+    LayerConfig,
+    Light_Layers,
+    Light_Sources,
+    Vector_Layers,
+} from './baseSetting/gis-data/sources_layers';
+export { Dark_Style, Light_Style, DevMapConfig } from './baseSetting/style/DevMapConfig';
+export { default as TokenUtils } from './baseSetting/utils/TokenUtils';
+
+// ==================== MapboxGL 工具 ====================
+export { default as mapbox } from './mapboxgl/utils/mapbox';
+export { default as MapboxNative } from './mapboxgl/utils/mapbox_native';
+
+// ==================== MapGIS 工具 ====================
+export { default as mapgis } from './mapgis/utils/mapgis-common';
+export {
+    createLayer,
+    getDataLayers,
+    removeLayerFromManager,
+    clearLayers,
+} from './mapgis/js/datalayer';

package/mapboxgl/js/common/AnnotationLayer.js

@@ -0,0 +1,341 @@
+import DataUtils from '../utils/DataUtils';
+import VerifyUtils from '../utils/VerifyUtils';
+import LayerProvider from '../geog/LayerProvider';
+import GeoJsonProvider from '../geog/GeoJsonProvider';
+
+/**
+ * 定义注记图层
+ * @alias AnnotationLayer
+ *
+ * @summary <用于注记图层加载>
+ */
+export default class AnnotationLayer {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    // 默认数据源ID
+    this._defaultSourceId = 'point_annotation';
+    // 数据源是否存在
+    this._hasSource = true;
+
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    /**
+     * 字段名
+     * @type {String}
+     */
+    this._fieldName = DataUtils.default(options.field, 'name');
+
+    /**
+     * 符号位置
+     * @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 {Number}
+     */
+    this._textSize = DataUtils.default(options.textSize, 15);
+
+    /**
+     * 文本偏移
+     * @type {Array}
+     */
+    this._textOffset = DataUtils.default(options.textOffset, [0, 0]);
+
+    /**
+     * 文本旋转角度(顺时针)
+     * @type {Number|Array}
+     */
+    this._textRotate = DataUtils.default(options.textRotate, 0);
+
+    /**
+     * 文本可移动的锚点
+     * @type {Array}
+     */
+    this._variableAnchor = DataUtils.default(options.variableAnchor, ['center']);
+
+    /**
+     * 文本径向偏移
+     * @type {Number}
+     */
+    this._radialOffset = DataUtils.default(options.radialOffset, 0);
+
+    /**
+     * 图标是否环绕文字
+     * @type {Boolean}
+     */
+    this._around = DataUtils.default(options.around, false);
+
+    /**
+     * 过滤条件数组
+     * @type {Array}
+     */
+    this._filter = DataUtils.default(options.filter, undefined);
+
+    /**
+     * 数据源ID
+     * @type {String}
+     */
+    this._sourceId = DataUtils.default(options.sourceId, this._defaultSourceId);
+
+    /**
+     * 图层ID
+     * @type {String}
+     */
+    this._layerId = DataUtils.default(options.layerId, this._sourceId);
+
+    // 样式属性数组
+    this._styleProperties = [];
+  }
+
+  /** 公有方法 **/
+  /**
+   * 设置数据
+   * @param {Object|String|Array} data -GeoJSON要素集/查询语句/过滤条件(点位)数组
+   *
+   * @summary <data参数：
+   *   Object - GeoJson要素/要素集
+   *   String - cql_filter查询语句
+   *   Array - 图层过滤条件数组(如：['==', field, value]) or 点位数组(包含longitude, latitude字段)
+   * >
+   */
+  setData(data) {
+    // 加载图层
+    if (!this.hasLayer()) {
+      this.loadLayer();
+    }
+    // 隐藏图层
+    this.showLayer(false);
+
+    let fc = null;
+    if (VerifyUtils.isGeoJsonFC(data)) {
+      // GeoJSON要素集合
+      fc = data;
+    } else if (VerifyUtils.isGeoJsonFeature(data)) {
+      // GeoJSON要素
+      fc = GeoJsonProvider.getEmptyFC();
+      fc.features = [data];
+    } else if (VerifyUtils.isArray(data)) {
+      if (data.length > 1 && VerifyUtils.isString(data[0])) {
+        // 设置筛选器
+        this._map.setFilter(this._layerId, data);
+      } else {
+        // 数组转GeoJSON对象
+        fc = GeoJsonProvider.data2PointFC(data);
+      }
+    } else if (VerifyUtils.isString(data)) {
+      // 查询语句
+      if (this._hasSource) {
+        const source = this._map.getSource(this._sourceId);
+        fc = source._data + (data ? "&cql_filter=" + data : '');
+      }
+    }
+
+    fc = fc || GeoJsonProvider.getEmptyFC();
+
+    // 更新数据源
+    this._map.getSource(this._sourceId).setData(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 = ['all', this._filter];
+    }
+    */
+    if (this._filter) {
+      if (this._filter.length === 1) {
+        newFilter = ['all', this._filter];
+      } else {
+        newFilter = [].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 sourceId = this._sourceId;
+    const layerId = this._layerId;
+    // 判断数据源是否存在
+    this._hasSource = LayerProvider.hasSource(map, sourceId);
+    if (!this._hasSource) {
+      // 添加数据源
+      map.addSource(sourceId, {
+        type: "geojson",
+        data: GeoJsonProvider.getEmptyFC()
+      });
+    }
+
+    // 自定义字体颜色
+    let textColor = map._customStyle ? map._customStyle.textColor : '#F8F8FF';
+    //let textHaloWidth = map._customStyle ? map._customStyle.textHaloWidth : 0.1;
+
+    map.addLayer({
+      type: "symbol",
+      id: layerId,
+      source: sourceId,
+      minzoom: this._minzoom,
+      layout: {
+        "symbol-placement": this._placement,
+        "symbol-spacing": this._spacing,
+        "symbol-avoid-edges": true,
+        "text-offset": this._textOffset,
+        "text-field": "{" + this._fieldName + "}",
+        "text-size": this._textSize,
+        "text-font": ["Microsoft YaHei"],
+        "text-max-width": 32,
+        "text-rotate": this._textRotate,
+        "text-rotation-alignment": "map",
+        "text-variable-anchor": this._variableAnchor,
+        "text-radial-offset": this._radialOffset,
+        'text-justify': 'auto',
+        visibility: "none"
+      },
+      paint: {
+        "text-color": textColor,
+        //"text-halo-color": "#8B8B8B",
+        //"text-halo-width": textHaloWidth,
+      }
+    });
+
+    // 图标环绕文组
+    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(this._layerId, this._filter);
+    }
+  }
+
+  /**
+   * 显示/隐藏图层
+   * @param {Boolean} isShow -是否显示图层
+   */
+  showLayer(isShow) {
+    LayerProvider.showLayer(this._map, this._layerId, isShow);
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  hasLayer() {
+    return LayerProvider.hasLayer(this._map, this._layerId);
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    LayerProvider.removeLayer(this._map, this._layerId);
+  }
+
+  /**
+   * 移除数据源
+   */
+  removeSource() {
+    LayerProvider.removeSource(this._map, this._sourceId);
+  }
+}