Vue3 地图组件库

一个基于 Vue3 + OpenLayers 的现代化地图组件库，提供丰富的地图功能和交互体验。

🚀 特性

• Vue3 支持: 完全基于 Vue3 Composition API 开发
• TypeScript 支持: 完整的 TypeScript 类型定义
• 现代化构建: 使用 Vite 进行快速构建
• 组件化设计: 模块化的地图组件，易于扩展
• 丰富功能: 支持图层管理、查询、标注、测量等功能

📦 安装

npm install skhj-map

🔧 快速开始

基础使用

<template>
  <div style="width: 100%; height: 500px;">
    <forestry-map
      :map-id="'myMap'"
      :expand="true"
      @mapComplete="onMapComplete"
    />
  </div>
</template>

<script setup>
import { ForestryMap } from 'skhj-map';

const onMapComplete = (map) => {
  console.log('地图初始化完成:', map);
};
</script>

完整功能示例

<template>
  <div style="width: 100%; height: 600px;">
    <forestry-map
      ref="mapRef"
      :map-id="'fullMap'"
      :is-show-map-tool-bar="true"
      :is-show-layer-symbol="true"
      :is-show-poi-query="true"
      :expand="true"
      @mapComplete="onMapComplete"
      @featureSelected="onFeatureSelected"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ForestryMap } from 'skhj-map';

const mapRef = ref(null);

const onMapComplete = (map) => {
  console.log('地图初始化完成');
};

const onFeatureSelected = (configLayer, features, isSelected) => {
  console.log('要素选择:', features);
};
</script>

🗺️ 主要组件

ForestryMap

主地图组件，提供基础地图功能。

Props:

• mapId: 地图唯一标识
• expand: 是否展开工具栏
• isShowMapToolBar: 是否显示地图工具栏
• isShowLayerSymbol: 是否显示图层符号
• isShowPoiQuery: 是否显示POI查询

Events:

• mapComplete: 地图初始化完成
• featureSelected: 要素选择事件

MapToolBar

地图工具栏组件，提供各种地图操作工具。

LayerManager

图层管理器，支持图层的显示/隐藏、透明度调节等。

MapQueryResult

地图查询结果组件，显示查询结果列表。

🛠️ 开发

环境要求

• Node.js >= 16
• npm >= 8

安装依赖

npm install

开发模式

npm run dev

构建

npm run build

类型检查

npm run type-check

📁 项目结构

src/
├── components/          # 组件目录
│   ├── ForestryMap.vue  # 主地图组件
│   ├── component/       # 子组件
│   └── lib/            # 工具库
├── api/                # API 接口
├── utils/              # 工具函数
├── styles/             # 样式文件
└── index.ts            # 入口文件

🔄 从 Vue2 升级

本项目已从 Vue2 完全升级到 Vue3，主要变更：

语法变更

• data() → ref() / reactive()
• methods → 箭头函数
• this.$emit → emit()
• this.$refs → ref()

组件更新

• 使用 <script setup> 语法
• 使用 defineProps() 和 defineEmits()
• 使用 defineExpose() 暴露方法

依赖更新

• 移除了 webpack 相关依赖
• 使用 Vite 作为构建工具
• 更新了 Element Plus 到最新版本

🎯 优化内容

构建优化

• 移除了 webpack 配置，统一使用 Vite
• 优化了依赖包，移除了不必要的插件
• 简化了构建配置

代码优化

• 清理了未使用的导入
• 修复了变量重复声明问题
• 优化了组件间的通信方式

性能优化

• 使用 Vue3 的响应式系统
• 优化了组件的生命周期管理
• 减少了不必要的重渲染

2.0.17版本

• 将天地图添加方式改为wmts方式进行添加。dataserver方式添加已弃用。

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📞 支持

如有问题，请通过以下方式联系：

• 提交 Issue
• 发送邮件至: [email protected]