# ol-vue-hooks

**Repository Path**: jackzhoumine/ol-vue-hooks

## Basic Information

- **Project Name**: ol-vue-hooks
- **Description**: openLayers 二次封装的 vue hooks 库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-06
- **Last Updated**: 2025-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ol-vue-hooks

基于 vue 二次封装 openLayers 核心功能，以 hooks 形式提供接口。

## 特性

## hooks

| hooks      | 功能                     | 是否可用 |
| ---------- | ------------------------ | -------- |
| useMap     | 初始化一个地图           |          |
| useLayers  | 添加图层，组件销毁时移除 |          |
| useEvents  | 绑定地图事件             |          |
| useMarkers | icon 标记或者文本标记    |          |
| useLines   | 绘制线段                 |          |

## 核心函数

| 函数         | 功能           | 是否可用 |
| ------------ | -------------- | -------- |
| flyTo        | 飞行定位到某处 |          |
| setBaseLayer | 设置底图       |          |

## 问题

### 库的目的

基于 vue 把 ol 地图库二次封装成 hook 形式，库叫 ol-vue-hooks。

### 封装的代码

`src/index.ts` 是入口。

### 依赖关系

ol-ext 依赖 ol， ol-ext 的会在 ol-ext/filter/Base.js 中修改 ol/layer/Base.js 的原型。

ol/layer/Tile.js 瓦片图层类继承 ol/layer/Base.js ，而 ol-ext/filter/Base.js 会修改 ol/layer/Base.js。

而创建地图时，需要 new TileLayer() 得到一个瓦片图层。

### 问题表现

src/demos 是在本地的测试代码，pnpm dev 运行，遮罩功能正常。

在 demos 中，安装 ol-vue-hooks, pnpm dev，这里的遮罩功能不正常。

### 尝试的解决方案

因为 ol-ext/filter/Base.js 使用立即执行函数修改 ol/layer/Base.js ，我在 demos/src/main.ts 中首先引入 ol-ext/filter/Base.js，使立即执行函数执行，完成对 ol/layer/Base.js 的修改，但是 遮罩功能还是报 `index-DKEJwmUQ.js:14 TypeError: l.addFilter is not a function`。

### 可行的解决方案

在 `ol-vue-hooks/index.ts` 手动最先加载 `ol-ext/filter/Base.js`，且把`ol`和`ol-ext`声明为对等依赖。