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 项目，这篇入门教程都能带你完成安装、接入和画出第一个符号。
快速开始：三步接入你自己的地图
- 安装依赖：
npm install ol-plot，Vue 项目改装ol-plot-vue，并记得引入随包发布的样式文件。 - 按正常方式创建一个 OpenLayers 地图实例（Map、View、任意底图）。
- 用一行代码初始化标绘实例，
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 示例 里，照着抄最快。
关键文件速查
| 路径 | 什么时候去看 |
|---|---|
| packages/ol-plot/src/index.ts | 想了解 Plot 实例由哪些模块组成时 |
| packages/ol-plot/src/core/PlotDraw.ts | 排查绘制交互、图层命名问题时 |
| packages/ol-plot/src/core/PlotEdit.ts | 想改编辑控制点行为时 |
| packages/ol-plot/src/utils/PlotTypes.ts | 确认支持哪些标绘类型时 |
| packages/ol-plot-vue/src/plot.vue | Vue 组件内部逻辑和事件暴露位置 |
上手建议与常见问题
- 先看 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
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
