# ol-study-project

**Repository Path**: chotoo/ol-study-project

## Basic Information

- **Project Name**: ol-study-project
- **Description**: 基于 Vue 3 和 OpenLayers 的地图应用学习项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-09
- **Last Updated**: 2026-02-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ol-study-project

基于 Vue 3 和 OpenLayers 的地图应用学习项目

## 项目简介

本项目是一个使用 Vue 3 + Vite + OpenLayers 构建的地图应用学习项目，旨在学习和实践 WebGIS 开发技术。项目集成了 Element Plus UI 组件库，提供了基础的地图展示和交互功能。

![项目演示](./public/demo.gif)
## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Vite** - 下一代前端构建工具
- **OpenLayers** - 高性能 WebGIS 地图库
- **Element Plus** - Vue 3 组件库
- **Axios** - HTTP 请求库
- **ol-ext** - OpenLayers 扩展库

## 项目结构

```
ol-study-project/
├── public/                 # 静态资源
│   ├── BusStop.png        # 公交站图标
│   ├── ChargingStation.png # 充电站图标
│   └── ParkingLot.png     # 停车场图标
├── src/
│   ├── api/               # API 接口
│   │   ├── index.js
│   │   └── request.js
│   ├── assets/            # 资源文件
│   │   ├── base.css
│   │   ├── logo.svg
│   │   └── main.css
│   ├── components/        # 组件
│   │   ├── MapView.vue   # 地图视图组件
│   │   └── TopBar.vue     # 顶部导航栏组件
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── .env                   # 环境变量
├── index.html             # HTML 模板
└── vite.config.js         # Vite 配置
```

## 环境要求

- Node.js: ^20.19.0 || >=22.12.0
- pnpm: 推荐

## 项目安装

```sh
pnpm install
```

## 开发

启动开发服务器（支持热重载）：

```sh
pnpm dev
```

## 构建

构建生产版本：

```sh
pnpm build
```

## 预览

预览生产构建：

```sh
pnpm preview
```

## 推荐的 IDE 设置

[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (并禁用 Vetur)

## 推荐的浏览器设置

- 基于 Chromium 的浏览器（Chrome、Edge、Brave 等）：
  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
  - [在 Chrome DevTools 中启用自定义对象格式化](http://bit.ly/object-formatters)
- Firefox：
  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
  - [在 Firefox DevTools 中启用自定义对象格式化](https://fxdx.dev/firefox-devtools-custom-object-formatters/)

## 自定义配置

参见 [Vite 配置参考](https://vite.dev/config/)。

## 学习资源

- [OpenLayers 官方文档](https://openlayers.org/en/latest/doc/)
- [Vue 3 官方文档](https://cn.vuejs.org/)
- [Element Plus 官方文档](https://element-plus.org/zh-CN/)