WebmapComponent

介绍

通用化地图组件，用于设备点位信息和矿井地图信息的展示，集成了编辑、展示、地图底图管理功能

项目编号

WMapCOM2302

技术选型

• 打包工具：vite
• 框架：react18,react-router,typeScript
• UI框架：antd
• 地图组件：[email protected]
• 地图画布：@mapbox/mapbox-gl-draw
• Geo计算：@turf/turf
• 画面工具：mapbox-gl-draw-rectangle-mode
• css框架：Unocss

更新

1. 拉取项目：git clone 'ssh'
2. 下载依赖：npm i
3. 启动项目：npm run dev
4. 构建生产版本：npm run build
5. 发布项目：npm publish(发布之前需要推送项目到远程，需要登录npm, 使用npm login命令)

使用

1. 项目使用：npm i mapsetting-ts

import { MapEdit, MapShow, MapUpload } from 'mapsetting-ts'
export default function App() {
  return <MapEdit />
}

结构

.
├── MapEdit // 编辑地图
│   ├── components
│   │   ├── CommonTitle.tsx // 公共标题
│   │   ├── FeaturesList.tsx // 详情组件
│   │   ├── FillProps.tsx // 面属性面板
│   │   ├── LayerPanels.tsx // 图层面板
│   │   ├── LineProps.tsx // 线属性面板
│   │   ├── PropsPanels.tsx // 属性面板包装
│   │   ├── Relevance.tsx // 关联设备面板
│   │   └── index.module.less // 组件样式
│   ├── index.module.less // 编辑样式
│   ├── index.tsx // 入口
│   └── map.css // 全局map样式
├── MapShow // 展示地图
│   ├── index.module.less // 样式文件
│   └── index.tsx // 入口
├── MapUpload // 地图管理
│   ├── components
│   │   ├── Dialog.tsx // 编辑弹窗
│   │   └── List.tsx // 列表
│   └── index.tsx // 入口
├── api // 地图接口文件
│   ├── map.ts
│   └── type.ts
├── assets // 地图静态文件
│   ├── image
│   │   ├── screen-show-bg.png
│   │   └── upsIcon.svg
│   └── react.svg
├── components
│   ├── Empty // 全局message
│   │   └── index.tsx
│   └── Icons //ICON文件
│       └── index.tsx
├── entry.ts // 打包入口
├── index.css // 全局样式
├── main.tsx // demo样式
├── mapSetting // 地图核心逻辑
│   ├── InfoBar.tsx // 信息组件
│   ├── Legend.tsx // 图例组件
│   ├── Preview.tsx // 展示组件
│   ├── cacheBaseMap.ts // 地图缓存
│   ├── drawStyle.ts // 画布样式
│   ├── index.css 
│   ├── index.module.less
│   ├── layerOptions.ts // 图层设置
│   ├── shim.d.ts
│   ├── tool.ts // 工具
│   ├── type.ts // 类型定义
│   └── useMap.ts // 地图hook
├── utils
│   ├── index.ts
│   ├── request.ts // 请求
│   └── ups.ts // ups独有接口
└── vite-env.d.ts