ol-plot：25 种地图标绘符号一站搞定，OpenLayers 矢量绘制不再手搓
【免费下载链接】ol-plot:art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘项目地址: https://gitcode.com/gh_mirrors/ol/ol-plot
痛点切入
在 OpenLayers 上做地图应用的人都熟悉这种体验：需要往地图上画一个多边形、箭头或者弧线时，就得自己写坐标采集、命中检测和编辑逻辑，代码堆到几百行，交互体验还不一定理想。ol-plot 就是一个替你把这套"手搓标绘"工作接过去的 OpenLayers 扩展标绘库。
快速认知：它是什么
new Plot(map)一行就能把标绘绘制工具挂到地图实例上，内置 25 种标绘符号——从箭头、弧线、扇形到集结地——外加完整的"绘制、编辑、序列化"流程。Vue 项目另配组件包ol-plot-vue（Vue2 / Vue3 都有构建产物），挂一个组件就得到现成的标绘工具面板。
核心能力拆解
25 种内置标绘符号，一行激活任意一种
解决"没有现成符号库"的问题。符号类型覆盖点、线、面、自由线这类基础类型，也包括进攻方向、战斗行动、扇形、集结地等战术符号，兼顾通用标注和战术标绘。调plot.plotDraw.activate(type, params)进入绘制，deactivate()退出，工具栏状态完全由你控制。
点击即编辑，事件全程可挂
解决"画完不能改"的问题。plot.plotEdit.activate(feature)让指定要素进入编辑态；事件侧提供drawStart、drawEnd、activePlotChange、deactivatePlot，画布高亮、保存、消息提示这些 UI 状态都能按阶段接上。
标绘结果一键序列化
解决"画完的数据放哪"的问题。plot.plotUtils.getFeatures()把地图上的所有符号序列化成数组，addFeatures用保存的数组还原，removeAllFeatures整图清空。这意味着"保存、重载、还原"的完整链路不用再自己设计存储结构。
Vue 组件面板，UI 直接带上
解决"工具面板还得自己写"的问题。ol-plot-vue自带符号图标列表，背景色、边框色、线宽、透明度在面板里直接调。对 Vue 项目来说，这意味着挂上组件就能开始画，不用先搭一整套工具栏。
典型落地场景
- 战术推演里拖出一条进攻弧线，用粗箭头指明推进方向，扇形圈出防御区域
- 城市规划中用自由多边形勾出建设范围，再补一个文本框写注记
- 环境监测时用弧线标出污染事故影响面，用点符号落采样位置
- 户外记录里沿徒步轨迹铺开一条自由线，营地位置打个小旗
- GIS 课上让学生直接用现成符号库练矢量绘制，省掉理解 Canvas 的阶段
技术要点速览
| 项 | 说明 |
|---|---|
| 兼容 OpenLayers | 3 ~ 7 多个大版本 |
| 包管理 | npm 包ol-plot、ol-plot-vue；源码仓库为 pnpm monorepo |
| 构建 | Vite + esbuild，发布含压缩构建，CSS / JS 分开优化 |
| 运行环境 | Node ≥ 18.16.1，TypeScript 编写 |
| 许可证 | MIT |
快速上手路径
- 安装核心包：
npm install ol-plot，并引入ol-plot/dist/ol-plot.css import Plot from 'ol-plot'拿到构造函数- 建好地图
new Map({...})后执行const plot = new Plot(map)完成初始化 plot.plotDraw.activate('POLYGON')激活符号类型即可开始绘制；本地开发可git clone https://gitcode.com/gh_mirrors/ol/ol-plot后执行pnpm install、pnpm run dev跑起示例
收尾
如果你正在用 OpenLayers 做地图标绘相关的功能——战术推演、规划工具或 GIS 教学都算——值得花 10 分钟装一下试试。需要自研标绘类型时，参考packages/ol-plot/src/geometry目录下的现成符号结构改一份即可。
【免费下载链接】ol-plot:art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘项目地址: https://gitcode.com/gh_mirrors/ol/ol-plot
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
