@rsmap/vue3ol NPM

vue3ol

该 GIS 二维地图 Vue3 组件库是基于 OpenLayers 开发的。
本组件库是源于 Github 上的开源组件库 vue3-openlayers by Melih Altıntaş ，在其基础上根据自身的需求进行了定制，并且修复了一些问题。

源代码仓库地址： https://github.com/leolovesmile/vue3ol
npm package 地址： https://www.npmjs.com/package/@rsmap/vue3ol

安装与使用

安装

# 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参考，可明显提升性能
ol-source-xyz 增加属性 attributions 和属性 tileGrid
增加几个与 webgl 相关的组件：ol-webglpoints-layer, ol-webgl-tile-layer, ol-source-webglpoints
修复组件ol-overlay的属性positioning的类型的 bug