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声明为对等依赖。