WebmapComponent

介绍

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

项目编号

WMapCOM2302

技术选型

• 打包工具：vite
• 框架：vue3+
• UI框架：arco-design
• 地图组件：[email protected]
• 地图画布：@mapbox/mapbox-gl-draw
• Geo计算：@turf/turf
• 画面工具：mapbox-gl-draw-rectangle-mode

更新

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

使用

1. 项目使用：npm i krsmapsetting

<template>
  <div class="container">
    <krsMapsetting ref="mapContainer"/>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { krsMapsetting } from 'krsmapsetting'
import 'krsmapsetting/dist/entry.css'

const mapContainer = ref(null)

onMounted(() => {
  mapContainer.value.initMap([0, 0])
})
</script>

结构

├── App.vue // 示例demo
├── assets
│   ├── image
│   │   └── screen_bg.jpg // 背景图
│   └── svg // 地图图标
│       ├── HomeFilled.svg
│       ├── add.svg
│       ├── area.svg
│       ├── cancel.svg
│       ├── distance.svg
│       ├── edit.svg
│       ├── fullScreen.svg
│       ├── move.svg
│       ├── remove.svg
│       ├── reset.svg
│       ├── save.svg
│       ├── selectArea.svg
│       ├── vertexEdit.svg
│       ├── zoomIn.svg
│       └── zoomOut.svg
├── components // svg组件化
│   └── SvgIcon.vue
├── entry.js // 项目导出
├── main.js // 测试demo入口
├── mapSetting
│   ├── __test__
│   │   └── KrsMapsetting.spec.js // 测试文件
│   ├── drawStyle.js // mapdraw画布
│   ├── index.js // 导出
│   ├── infoBar.vue // 底部信息拦
│   ├── layerOptions.js // 构建图层
│   ├── legend.vue // 图例信息
│   ├── preview.vue // 地图组件
│   ├── tool.js // 通用工具
│   └── useMap.js // 地图功能
└── style.css // demo 样式