# vue3-vite-openlayers-gaode-multilayer-demo

**Repository Path**: sawyer1223/vue3-vite-openlayers-gaode-multilayer-demo

## Basic Information

- **Project Name**: vue3-vite-openlayers-gaode-multilayer-demo
- **Description**: Vue3 + Vite + OpenLayers + 高德地图多图层演示项目，包含底图切换、图层控制、标记点、控件自定义等前端 GIS 实战功能
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2025-07-22
- **Last Updated**: 2025-08-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-vite-openlayers-gaode-multilayer-demo

本项目是一个基于 **Vue3**、**Vite**、**OpenLayers** 和 **高德地图** 的前端 GIS 地图演示项目

## 技术栈

- Vue 3
- Vite
- OpenLayers
- 高德地图 API
- 现代前端工程化

## 功能亮点

- 高德矢量/影像底图切换
- 多图层管理与控制
- 地图标记点（支持 PNG 图标）
- 地图控件自定义（如缩放、鼠标位置显示等）
- 响应式组件化开发
- 支持 jQuery 与原生 JS 混用（演示兼容性）

## 适用场景

- 前端 GIS 地图开发学习
- Vue3 + Vite 工程化实践
- 面试作品集/技术能力展示

## 快速开始

```bash
pnpm install
pnpm run dev
```

访问 http://localhost:5173 查看效果。

## 关于外部地理数据库(GeoDB)的说明
-我自行使用mapgis创建了一个图层,只包含3个点元素(武汉,南京,上海),随后使用IGServer发布了服务
![igServer数据展示](src/assets/imgs/igserver%E5%B1%95%E7%A4%BA.gif)

## 效果预览

![效果展示](src/assets/imgs/%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA.gif)

## 目录结构

- `src/components/` 主要功能组件
- `src/map_libs/` 地图图层与数据
- `public/` 静态资源（如 PNG 图标）

---