@rsmap/vue3ol/README.md

使用 vue3 风格封装后的 Openlayer 地图组件库。

# vue3ol

> 该 GIS 二维地图 [Vue3](https://v3.cn.vuejs.org/ "Vue3 Homepage") 组件库是基于 [OpenLayers](https://openlayers.org/ "OpenLayers Homepage") 开发的。
>
> 本组件库是源于 Github 上的开源组件库 [vue3-openlayers by Melih Altıntaş](https://github.com/MelihAltintas/vue3-openlayers) ，在其基础上根据自身的需求进行了定制，并且修复了一些问题。

- 源代码仓库地址： https://github.com/leolovesmile/vue3ol

- npm package 地址： https://www.npmjs.com/package/@rsmap/vue3ol

## 安装与使用

### 安装

```bash
# install current vue3ol version
npm install @rsmap/vue3ol
# or
yarn add @rsmap/vue3ol
```

### 使用

- 在 main.js (或其它入口) 引入组件，关键代码如下：

```
import OpenLayersMap from '@rsmap/vue3ol'
// 0.6.0 之前版本
import '@rsmap/vue3ol/dist/vue3ol.css'
// 0.6.0(包含) 之后版本
import '@rsmap/vue3ol/dist/styles.css'

app.use(OpenLayersMap)
```

- `0.6.0` 之前版本没有类型定义文件，请创建一个 `d.ts` 文件（或使用已有的文件），文件内加入如下代码来声明 module

```
declare module '@rsmap/vue3ol'
```

- 接下来便可以使用本组件库了

## change logs

### 2024 年 8 月 29 日

- 新增组件 `OlMapboxVectorLayer`

### 2024 年 8 月 29 日

- upgrade `openlayers` to version 10.x

### 2024 年 3 月 4 日

- 组件`OlSourceVectorTile` 恢复 `format` 属性参数默认值

### 2024 年 2 月 19 日

- 修复组件`OlSourceWMTS` 中 `crossOrigin` 属性设置无效的问题

### 2024 年 1 月 26 日

- 组件`OlMap` 恢复 `zLevelRange` 属性参数

### 2024 年 1 月 22 日

- 修复组件`OlSourceWMTS` 无法读取元数据 `capabilitiesUrl` 的问题

### 2023 年 12 月 7 日

- `所有layer组件` 忽略属性 `properties` 的变化监听, 避免组件销毁过程中产生错误
- 组件`ol-source-image-wms` 优化 `capabilitiesUrl` 请求次数

### 2023 年 11 月 28 日

- 组件`ol-source-image-wms`增加了属性`parseCapabilitiesToOptions`, 支持自定义方法设定瓦片请求参数

### 2023 年 7 月 21 日

- 修复 `OlSourceWMTS` 请求瓦片时，由于一些`Capabilities XML`中 `GetTile` URL 参数不完整出现请求瓦片失败的问题

### 2023 年 7 月 3 日

- 修复 `map` 组件由于`control`属性未初始化默认带有`ZoomControl` 的问题
- 修改运算符`??`写法，提高兼容性
- 修改 `OlSourceXYZ` 中属性 `opaque` (是否为不透明图层) 默认值为 `false`

### 2023 年 6 月 30 日

- upgrade `openlayers` to version 7.x

### 2023 年 2 月 13 日

- 组件`ol-source-image-wms`增加了属性`capabilitiesUrl`，以支持通过 wms 的元数据（GetCapabilities）来加载 wms 图层

### 2022 年 10 月 27 日

- `ol-zoom-level-control`组件以增加 `precision` 属性, 对地图层级显示精度进行控制

### 2022 年 9 月 19 日

- `ol-tile-layer`组件的增加图层添加到`map`的 `added` 事件及从`map`移除的`removed`事件

### 2022 年 9 月 13 日

- `ol-tile-layer`组件的事件 `moveend` 触发时机调整，并且在事件对象中增加图层信息

### 2022 年 9 月 8 日

- `ol-tile-layer`组件增加五个事件 `postrender`, `prerender`, `propertychange`, `change`, `moveend`
- 升级 openlayers 和 ol-ext 的版本

### 2022 年 7 月 26 日

- `ol-map`组件以及各个 Layer 增加 `zIndexRange` 属性, 各个 Layer 增加 `pin()` 方法, 对图层 zIndex 范围进行控制

### 2022 年 7 月 25 日

- `ol-style-text`组件增加 `backgroundFill` 和 `backgroundStroke` 属性

### 2022 年 6 月 29 日

- `Map`组件移除掉了两个 openlayers 6.0 后已弃用的参数 `loadTilesWhileAnimating`与`loadTilesWhileInteracting`

### 2022 年 6 月 10 日

- 组件`ol-interaction-transform` 增加方法 getSelectedFeatures 获取选中 layer 的 features

### 2022 年 6 月 02 日

- 默认注册 projection `EPSG:4490`

### 2022 年 6 月 02 日

- 新增 control `ol-zoom-level-control`， 用于显示当前 map 的 zoom level
- 组件`ol-source-wmts`增加配置项`tileLoadFunction`

### 2022 年 5 月 25 日

- 新增两个组件 `ol-filter-mask` 与 `ol-filter-crop`， 用于在图层上添加蒙板或者对图层进行裁剪

### 2022 年 5 月 17 日

- `ol-source-wmts`组件修复 crossOrigin 赋值失效 Bug

### 2022 年 4 月 18 日

- `ol-source-wmts`组件的调整 TileGrid 默认的最高级别

### 2022 年 4 月 16 日

- `ol-webglpoints-layer`与`ol-source-webglpoints`组件的调优， 主动 dispose 资源，以及调整使用`features`属性时的性能

### 2022 年 4 月 7 日

- `ol-basic-draw`组件的完善 增加坐标系 允许单次绘制多个图形和单个图形 ，允许开启测面测距功能

### 2022 年 3 月 25 日

- 增加`ol-basic-draw`组件 增加属性`isMeasure`开启测量工具
- 组件`ol-source-wmts`绕过了 openlayers 自身的一个 bug

### 2022 年 3 月 17 日

- 组件`ol-source-wmts`增加了属性`capabilitiesUrl`，以支持通过 wmts 的元数据（GetCapabilities）来加载 wmts 图层

### 2022 年 3 月 16 日

- 组件`ol-source-wmts`的层级做了优化

### 2022 年 3 月 10 日

- 新增`ol-mvt-style-layer`，可以加载 mapbox style 定义的矢量瓦片
- `ol-source-wmts`组件增加`requestEncoding`属性

### 2022 年 3 月 2 日

- `ol-source-vector-tile`提供属性`projection`，用于配置**tile grid**的 projection

### 2022 年 2 月 25 日

- `ol-source-vector` 增加属性 `once`，若该属性为`true`，会将`features`属性`markRaw`[参考](https://v3.cn.vuejs.org/api/basic-reactivity.html#markraw)，可明显提升性能
- `ol-source-xyz` 增加属性 `attributions` 和属性 `tileGrid`
- 增加几个与 webgl 相关的组件：`ol-webglpoints-layer`, `ol-webgl-tile-layer`, `ol-source-webglpoints`
- 修复组件`ol-overlay`的属性`positioning`的类型的 bug

### 2022 年 01 月 25 日

- 合并代码，加入`ol-projection-register`组件，支持注册新的 projection

### 2022 年 01 月 17 日

- 新增矢量瓦片组件`ol-vector-tile-layer`和`ol-source-vector-tile`

### 2021 年 12 月 28 日

- 组件`ol-source-image-wms`增加了`time`参数
- 修复了 `SourceWMTS.vue` 的一个 bug

### 2021 年 12 月 21 日

- `ol-swipe-control` bug 修复：卷帘的图层列表变化时，卷帘未更新
- `ol-source-image-arcgis-rest`: 增加 arcgis rest 类型的栅格源