ol-plot：25 种地图标绘符号一站搞定，OpenLayers 矢量绘制不再手搓

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 的阶段

技术要点速览

快速上手路径

1. 安装核心包：npm install ol-plot，并引入ol-plot/dist/ol-plot.css
2. import Plot from 'ol-plot'拿到构造函数
3. 建好地图new Map({...})后执行const plot = new Plot(map)完成初始化
4. 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