# openlayers-test

**Repository Path**: bidding-M/openlayers-test

## Basic Information

- **Project Name**: openlayers-test
- **Description**: openlayers 学习
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-06-12
- **Last Updated**: 2026-07-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: openlayers, vue3, TypeScript

## README

# openlayers-test

基于 **Vue 3 + TypeScript + OpenLayers** 的地图功能演示项目，集成了 13 个常用的 Web 地图功能 Demo。

## 技术栈

| 类别         | 技术               |
| ------------ | ------------------ |
| 框架         | Vue 3 + TypeScript |
| 构建工具     | Vite 5             |
| 地图引擎     | OpenLayers 6.x     |
| UI 组件库    | Ant Design Vue 4.x |
| 样式预处理器 | Less               |
| 状态管理     | Vuex 4（预留）     |
| 路由         | Vue Router 4       |

## 功能 Demo 列表

| #   | Demo             | 功能描述                                                            |
| --- | ---------------- | ------------------------------------------------------------------- |
| 1   | **地图图层**     | 基础地图展示，加载高德瓦片图层，含全屏、比例尺、鹰眼等控件          |
| 2   | **多地图同步**   | 上下两个地图实例，支持共享 View 实现缩放/平移联动                   |
| 3   | **图层切换**     | 四种底图切换（高德街道图、OSM、卫星图、Stamen地形），支持透明度调节 |
| 4   | **要素标注**     | 多点标记的添加/删除/选中，弹出信息窗口                              |
| 5   | **区域图层**     | 加载 GeoJSON 行政区划数据，定位到指定区域                           |
| 6   | **聚合点图层**   | 2 万个随机点的聚合显示，根据数量分级渲染                            |
| 7   | **热力图**       | Heatmap 图层，支持模糊半径和点半径实时调节                          |
| 8   | **绘制要素**     | 点/线/面/圆绘制工具，支持编辑（Modify）和吸附（Snap）               |
| 9   | **测量工具**     | 测距（线）和测面积（多边形），球面计算，实时显示结果                |
| 10  | **要素选择**     | 点击选择要素高亮，弹出位置随地图动态更新的信息窗口                  |
| 11  | **地理定位**     | 浏览器定位 API，含 WGS-84 → GCJ-02 坐标转换，实时位置追踪           |
| 12  | **视角调整**     | 地图旋转角度控制（滑块/预设按钮），支持 Shift+拖拽旋转              |
| 13  | **可视范围调整** | 缩放到多边形范围（带 buffer）、中心点、复位视图                     |

## 项目结构

```
src/
├── main.ts                    # 应用入口
├── App.vue                    # 根组件
├── router/index.ts            # 路由配置
├── store/index.ts             # Vuex store（预留）
├── views/                     # 13 个 Demo 视图
│   ├── Home.vue               # 主容器（动态组件切换）
│   ├── MapDemo.vue            # 基础地图展示
│   ├── MultiMapDemo.vue       # 多地图同步
│   ├── LayerSwitchDemo.vue    # 图层切换
│   ├── MarkDemo.vue           # 要素标注
│   ├── RegionDemo.vue         # 区域图层
│   ├── ClusterDemo.vue        # 聚合点图层
│   ├── HeatmapDemo.vue        # 热力图
│   ├── DrawDemo.vue           # 绘制要素
│   ├── MeasureDemo.vue        # 测量工具
│   ├── SelectDemo.vue         # 要素选择
│   ├── GeolocationDemo.vue    # 地理定位
│   ├── ViewAngleDemo.vue      # 视角调整
│   └── FitToPolygonDemo.vue   # 可视范围调整
├── hooks/                     # 核心地图逻辑 Hooks
│   ├── useMapInit.ts          # 地图初始化
│   ├── useMapDraw.ts          # 绘制工具
│   ├── useMapMeasure.ts       # 测量工具
│   ├── useMapOverlay.ts       # 要素叠加
│   ├── useMapEvent.ts         # 地图事件
│   ├── useMapView.ts          # 视角操作
│   ├── useMapUtils.ts         # 工具函数
│   └── useMapStyle.ts         # 样式函数
├── components/
│   └── SiderMenu.vue          # 左侧悬浮菜单
├── common/
│   ├── css/                   # 基础样式 & 控件自定义样式
│   └── data/fakeData.ts       # 模拟数据
└── utils/
    └── coordTransform.ts      # WGS-84 ↔ GCJ-02 坐标转换
```

## 快速开始

### 环境要求

- Node.js >= 16
- 包管理器：npm / yarn / pnpm

### 安装依赖

```bash
yarn install
```

### 启动开发服务器

```bash
yarn dev
```

默认运行在 `http://localhost:11800/openlayers-test/`

### 构建生产版本

```bash
yarn build
```

### 预览生产构建

```bash
yarn preview
```

## 底图说明

默认使用高德地图瓦片服务，同时支持切换：

- 高德街道图
- OpenStreetMap
- 高德卫星图
- Stamen 地形图

坐标系采用 EPSG:3857（Web Mercator），通过 `fromLonLat` / `toLonLat` 进行经纬度转换。地理定位功能中额外实现了 WGS-84 → GCJ-02（火星坐标系）转换，以匹配高德底图。

## 参考资料

- [OpenLayers 官网](https://openlayers.org/)
- [OpenLayers API 文档](https://openlayers.org/en/latest/apidoc/)
- [OpenLayers Examples](https://openlayers.org/en/latest/examples/)