Gdos-storage-modal NPM

gdos-storage-modal

总体截图 Alt text

功能介绍

使用前全局导入样式文件和图标文件

import "gdos-storage-modal/dist/style.css";
import "gdos-storage-modal/dist/iconfont";

1.根据文件路径，单独预览矢量文件

  <GdosStorageModal
    visible={open}
    onOk={(paths,selectTreeNodes) => {
      console.log(paths[0],selectTreeNodes);
      setOpen(false)
    }}
    onCancel={() => setOpen(false)}
    previewPath="/data/storageData/result/result.shp" // 文件路径
  />

Alt text

2.文件预览、栅格预览以及矢量预览 矢量预览 Alt text 栅格预览文件预览

3.是否显示文件节点

  <GdosStorageModal
    visible={open}
    onOk={(paths,selectTreeNodes) => {
      console.log(paths[0],selectTreeNodes);
      setOpen(false)
    }}
    onCancel={() => setOpen(false)}
    showFileNode={false} // 控制是否显示文件节点
  />

Alt text

4.是否可以选择文件或文件夹 略，见参数说明

5.过滤的存储类型 略，见参数说明

6.过滤的文件类型

  <GdosStorageModal
    visible={open}
    onOk={(paths,selectTreeNodes) => {
      console.log(paths[0],selectTreeNodes);
      setOpen(false)
    }}
    onCancel={() => setOpen(false)}
    filterFileType={["tif", "shp"]} // 过滤文件类型
  />

Alt text

7.底图基础设置 略，见参数说明

8.自定义选择底图功能

  const baseMapList = [{
    name: "2023年全国生态环境2米影像一张图", // 底图名称
    url: "https://36.110.12.227/maptiles/tile/service/enhanceEergeView?x={x}&y={y}&l={z}&uid=6666666666666&tdsId=952632629105274880&fromId=0",
    maxZoom: 22, // 最大缩放层级
    zIndex: 0, // 第三方底图的zIndex为0，添加的影像底图的zIndex为1
    visible: true, // 控制初始是否添加到地图
  },
  {
    name: "天地图矢量注记",
    url: "https://t1.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=9d3512a6ad161b05ac68a7fecf05b119",
    maxZoom: 22,
    zIndex: 3,
    visible: false,
  },
  {
    name: "天地图行政区划",
    url: "https://t1.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=9d3512a6ad161b05ac68a7fecf05b119",
    maxZoom: 10,
    zIndex: 2,
    visible: false,
  },
  {
    name: "天地图影像层",
    url: "https://t1.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=9d3512a6ad161b05ac68a7fecf05b119",
    maxZoom: 10,
    zIndex: -2,
    visible: false,
  },]

  
  <GdosStorageModal
    visible={open}
    onOk={(paths,selectTreeNodes) => {
      console.log(paths[0],selectTreeNodes);
      setOpen(false)
    }}
    onCancel={() => setOpen(false)}
    gdosAssetsService={gdosAssetsService}
    baseMapList={baseMapList}
  />

Alt text

9.支持多选 略，见参数说明

参数说明

参数	描述	取值	默认值
visible	控制组件显示隐藏	boolean	false
previewPath	预览路径	string	null
multiple	是否支持多选	boolean	false
showFileNode	是否显示文件节点	boolean	true
selectableType	是否可以选择文件或文件夹	"directory";"node";"all";"none"	"all"
filterStorageType	过滤的存储类型	("file";"minio";"oss";"smb";"local")[]	null
filterFileType	过滤的文件类型	string[]	null
baseMapSeting	地图基础设置	{zoom?: number;defaultMaxZoom?: number;center?: number, number;maxBounds?: [number, number, number, number];}[]	null
baseMapList	地图基础底图列表	any[]	null
onOk	确定回调	(paths?: string[], selectTreeNodes?: DataNode[]) => void
onCancel	取消回调	() => void
isConsoleLog	是否打印日志	boolean	false
ivectorTileLayerStyles	矢量瓦片图层样式	object	{layer:weight: 0.5,color: "blue",opacity: 1,fillColor: "#48D1CC",fill: true,fillOpacity: 0.1,},}
axiosBaseUrl	axios请求地址	string	null
gdosAssetsService	见下述描述	() => void

注意

这个组件为业务组件，目的是为了贴合项目中多处选择目录存储文件所封装，所以该组件高度定制化，不是通用的公共组件。

组件中封装了后端对应的请求，所以接口请求相关的数据高度耦合。如果需要使用自己的数据，则需要传递 gdosAssetsService 请求实例，包含以下请求，例：

// gdosAssetsService.ts
import { gdosUrl } from "../config/config";
import { axiosFn } from "./request";
import { message } from "antd";

/** 定义数字或字符串的类型 */
type NumOrStr = number | string;

interface GxResult{
  /** 响应状态码 */
  status?:number;
  /** 响应消息 */
  message?:string;
  /** 响应数据 */
  data?:any;
  /** 响应服务器时间精确到秒 */
  timestamp?:string;
}

export interface GdosAssetsServiceType {
  /**查询系统底图 */
  querySystemBaseMap: (filter: {
    pageNum: NumOrStr;
    pageSize: NumOrStr;
  }) => Promise<GxResult>;
  /**查询存储 */
  queryStorage: (filter: {
    page: NumOrStr;
    size: NumOrStr;
    status?: NumOrStr;
  }) => Promise<GxResult>;
  /**查询存储文件 */
  queryStorageFile: (filter: {
    id: NumOrStr;
    path: NumOrStr;
  }) => Promise<GxResult>;
  /**获取文件地理范围（影像矢量） */
  previewVectorFileExtent: (filter: {
    path: NumOrStr;
    type: 0 | 2; // 0:影像 2:矢量
  }) => Promise<GxResult>;
  /**获取磁盘非影像矢量数据的预览地址 */
  getPreviewOtherFileUrl: (filter: { path: NumOrStr }) => Promise<GxResult>;
}

const API = {
  /**查询系统底图 */
  querySystemBaseMap: gdosUrl + "/basemap/query",
  /**查询存储 */
  queryStorage: gdosUrl + "/storage/query",
  /**查询存储文件 */
  queryStorageFile: gdosUrl + "/storage/listFiles",
  /**获取文件地理范围（影像矢量）/assets/preview/file/extent */
  previewVectorFileExtent: gdosUrl + "/assets/preview/file/extent",
  /**获取磁盘非影像矢量数据的预览地址 */
  getPreviewOtherFileUrl: gdosUrl + "/assets/preview/file/other",
};

// 用户业务Service实现，主要负责与服务单进行数据交换
const gdosAssetsService = {
  /**查询系统底图 */
  querySystemBaseMap: (filter: {
    pageNum: NumOrStr;
    pageSize: NumOrStr;
  }): Promise<GxResult> => {
    return new Promise((reslove, reject) => {
      axiosFn.postByJson(API.querySystemBaseMap, filter).then(
        (res) => {
          if (res.status !== 200) {
            message.error(res.message);
            return;
          }
          reslove(res);
        },
        (reason) => reject(reason)
      );
    });
  },
  /**查询存储 */
  queryStorage: (filter: {
    page: NumOrStr;
    size: NumOrStr;
    status?: NumOrStr;
  }): Promise<GxResult> => {
    return new Promise((reslove, reject) => {
      axiosFn.postByJson(API.queryStorage, filter).then(
        (res) => {
          if (res.status !== 200) {
            message.error(res.message);
            return;
          }
          reslove(res);
        },
        (reason) => reject(reason)
      );
    });
  },
  /**查询存储文件 */
  queryStorageFile: (filter: {
    id: NumOrStr;
    path: NumOrStr;
  }): Promise<GxResult> => {
    return new Promise((reslove, reject) => {
      axiosFn.getByJson(API.queryStorageFile, filter).then(
        (res) => {
          if (res.status !== 200) {
            message.error(res.message);
            return;
          }
          reslove(res);
        },
        (reason) => reject(reason)
      );
    });
  },
  /**获取文件地理范围（影像矢量） */
  previewVectorFileExtent: (filter: {
    path: NumOrStr;
    type: 0 | 2; // 0:影像 2:矢量
  }): Promise<GxResult> => {
    return new Promise((reslove, reject) => {
      axiosFn.getByJson(API.previewVectorFileExtent, filter).then(
        (res) => {
          if (res.status !== 200) {
            message.error(res.message);
            return;
          }
          reslove(res);
        },
        (reason) => reject(reason)
      );
    });
  },
  /**获取磁盘非影像矢量数据的预览地址 */
  getPreviewOtherFileUrl: (filter: { path: NumOrStr }): Promise<GxResult> => {
    return new Promise((reslove, reject) => {
      axiosFn.getByJson(API.getPreviewOtherFileUrl, filter).then(
        (res) => {
          // if (res.status !== 200) {
          //   message.error(res.message);
          //   return;
          // }
          reslove(res);
        },
        (reason) => reject(reason)
      );
    });
  },
};
export default gdosAssetsService;

接口对应响应数据：

/assets/preview/file (矢量文件预览接口)
previewFormat: 0 栅格瓦片；2 矢量瓦片 /assets/preview/file?path=文件路径&previewFormat=2&crs=EPSG:3857&l={z}&x={x}&y={y}&cache=false
/basemap/query(可选)

{
  "status": 200,
  "message": "成功",
  "data": [
    {
      "id": "876835599817125888",
      "name": "天启中国影像服务",
      "icon": "49ec8a1f74fd42a1b930f854164f4804",
      "url": "https://map.imagesky.com.cn/maptiles/tile/service/view?l={z}&y={y}&x={x}&fromId=0&tdsId=1756494356755520",
      "type": "xyz",
      "centre": [28.89, 119.47],
      "bounds": "{\"_southWest\":{\"lat\":1.746555619313266,\"lng\":69.25781250000001},\"_northEast\":{\"lat\":57.97898320865358,\"lng\":141.15234375000003}}",
      "zoom": 8,
      "colorSetting": {
        "brightness": 100,
        "contrast": 100,
        "grayscale": 0,
        "saturate": 100,
        "opacity": 100,
        "sepia": 0,
        "hue-rotate": 0,
        "blur": 0,
        "invert": 0
      },
      "uTime": "2024-07-04 11:00:48",
      "user": {
        "id": "6666666666666",
        "name": "",
        "type": {
          "otid": 1,
          "name": "用户"
        }
      }
    },
    {
      "id": "866737723296460800",
      "name": "arcgis",
      "icon": null,
      "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
      "type": "xyz",
      "centre": [28.89, 119.47],
      "bounds": null,
      "zoom": 10,
      "colorSetting": null,
      "uTime": "2023-06-15 15:07:22",
      "user": {
        "id": "6666666666666",
        "name": "",
        "type": {
          "otid": 1,
          "name": "用户"
        }
      }
    }
  ],
  "timeStamp": "2024-07-22 14:53:45"
}

/storage/query

{
  "status": 200,
  "message": "成功",
  "data": {
    "content": [
      {
        "id": "local_1_3",
        "name": "存储盘",
        "description": "数据存储盘，/data/storageData",
        "protocol": "local",
        "root": "/data/storageData",
        ...
      },
    ],
  },
  "timestamp": "2024-07-22 14:53:45"
}

/storage/listFiles

{
  "status": 200,
  "message": "成功",
  "data": [
    {
      "key": "33b8a7f78ffd4afb9f753aa446c76b15",
      "title": "/data/storageData/storage.id",
      "mainFile": false,
      "tag": "",
      "leaf": true
    },
    {
      "key": "9940256f80334b70aa7efd18082a35a9",
      "title": "/data/storageData/TQDATA-IMAGE-DOM",
      "mainFile": false,
      "tag": "",
      "leaf": false
    },
  ],
  "timestamp": "2024-07-22 15:02:15"
}

/assets/preview/file/extent

{
  "status": 200,
  "message": "成功",
  "data": "{ \"type\":\"Polygon\", \"coordinates\":[ [ [ 120.812559, 27.916666 ], [ 120.812559, 27.9525 ], [ 120.875059, 27.9525 ], [ 120.875059, 27.916666 ], [ 120.812559, 27.916666 ] ] ] }",
  "timeStamp": "2024-07-22 15:03:15"
}

/assets/preview/file/other

http://10.17.17.169:8012/onlinePreview?url=aHR0cDovLzEwLjE3LjE3LjE2OTo4ODY2L2dkb3MtYXNzZXRzL2Fzc2V0cy9sb2NhbC9maWxlL3N0cmVhbS9KVEpHWkdGMFlTVXlSbk4wYjNKaFoyVkVZWFJoSlRKR1ZGRkVRVlJCTFZaRlExUlBVaVV5UmpJd01qUXdOeVV5Um1Ob2FXNWhYMk5wZEhsZk1qQXlOREEzTVRJeE1EUTJNamdsTWtaamFHbHVZVjlqYVhSNUxuTmliZz09LnNibg%3D%3D

发布

1. npm run build
2. npm version patch // 自动替换下一个小版本
3. npm publish //发布

注意： 1. 发布速度太慢可以设置 npm config set proxy=http://127.0.0.1:7897 端口号为代理的端口号，发布完成后记得取消 npm config set proxy= 2. 发布前需要将源切换为 npm 源 npm config set registry=https://registry.npmjs.org