ol-plot 入门使用指南：三步把标绘工具接到 OpenLayers 地图上

ol-plot 入门使用指南：三步把标绘工具接到 OpenLayers 地图上

【免费下载链接】ol-plot:art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘项目地址: https://gitcode.com/gh_mirrors/ol/ol-plot

ol-plot 是一个面向 OpenLayers 的地图标绘扩展插件，它让你在地图上直接绘制弓形、箭头、扇形、文本框等符号，并支持对已绘制要素进行编辑和序列化保存。它兼容 ol 5 到 7，同时提供 Vue 组件包 ol-plot-vue。无论你维护的是纯 JS 地图工程还是 Vue 项目，这篇入门教程都能带你完成安装、接入和画出第一个符号。

快速开始：三步接入你自己的地图

1. 安装依赖：npm install ol-plot，Vue 项目改装ol-plot-vue，并记得引入随包发布的样式文件。
2. 按正常方式创建一个 OpenLayers 地图实例（Map、View、任意底图）。
3. 用一行代码初始化标绘实例，plotDraw、plotEdit、plotUtils三个子模块随即可用：

import Plot from 'ol-plot'; import 'ol-plot/dist/ol-plot.css'; const plot = new Plot(map); plot.plotDraw.activate(Plot.PlotTypes.ELLIPSE);

调用activate后，鼠标在地图上操作即可画出椭圆。换其他符号只需换一个类型常量。

会画什么：用类型常量切换符号

plotDraw.activate(type, params)是绘制入口，第二个参数可以传入该符号的自定义参数（颜色、线宽等）。支持的类型覆盖了常见标绘需求：

• 面状符号：弓形、椭圆、闭合曲线、扇形、矩形、自由面、集结地；
• 线状符号：曲线、折线、自由手绘线、圆；
• 箭头类：进攻方向、战斗行动、细直箭头、双箭头等带尾变体；
• 其他：点、旗标、文本框。

完整清单见 PlotTypes 定义，每个类型在 geometry 目录 下都有对应实现类。不想画时调用plotDraw.deactivate()退出即可。

怎么改和存：编辑与序列化两步走

• 编辑：绘制完成后，把要素传给plotEdit.activate(feature)就进入编辑状态，拖拽控制点调整形状，deactivate()退出。
• 存取：plotUtils.getFeatures()会把地图上所有符号序列化成数组，addFeatures()负责还原，removeAllFeatures()一键清空。把数组存到后端，再在加载时还原，标绘数据的保存恢复就完成了。

Vue 项目：两行代码挂载组件

如果你用 Vue，不需要手写工具栏。安装ol-plot-vue后注册插件，模板里放一个<ol-plot-vue :map="map" />组件并传入地图实例，工具栏和交互逻辑都由组件托管。完整可运行的写法在 playground/vue3 示例 里，照着抄最快。

关键文件速查

上手建议与常见问题

• 先看 playground/vue3，不要直接翻 src/。示例工程从建图到挂载组件全流程都有，改参数试效果比读源码快得多。
• 纯 JS 接入别漏样式文件。不引入ol-plot.css时，工具栏和文本框编辑框的样式会丢失，现象是"功能正常但界面错乱"。
• 事件监听要挂对对象。4.x 之后文本框相关事件（activeTextArea 等）绑定在 plot 实例上，而不是 map 实例上，老代码迁移时这是最常见的坑。

需要完整的参数、事件说明，直接查仓库根目录的 README.md；想边跑边改，就从 playground 下的示例工程入手。

【免费下载链接】ol-plot:art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘项目地址: https://gitcode.com/gh_mirrors/ol/ol-plot