企业官网建设流程全解析

ol-plot 快速上手：5 分钟给 OpenLayers 地图加上标绘功能的完整指南

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

ol-plot 是一个专门给 OpenLayers（支持 5 / 6 / 7 版本）加"标绘"能力的开源库。标绘就是指挥图上常用的那套战术符号：进攻箭头、集结地、弓形、扇形、旗帜。不用它你得手写一堆几何代码，用它之后，在地图上画两下就有了。适合正在做 WebGIS 应用、想快速给地图加上符号绘制与编辑功能的开发者。

3 步跑起来：从安装到画出第一个符号 🚀

第一步装依赖：npm install ol-plot。第二步建一张地图。第三步 new 一个实例挂上去，就能画了。

手头没有项目的话，先拉一份仓库看示例：git clone https://gitcode.com/gh_mirrors/ol/ol-plot，再执行pnpm install && pnpm run dev，重点看playground/single这套原生示例。

下面这段是最小可运行代码：建一张 OSM 底图，挂上标绘，进入画圆模式。跑起来后，鼠标点地图就能落点画圆，双击收笔。

import 'ol-plot/dist/ol-plot.css'; import Plot from 'ol-plot'; import { Map, View } from 'ol'; import Tile from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; const map = new Map({ target: 'map', layers: [new Tile({ source: new OSM() })], view: new View({ center: [0, 0], zoom: 2 }), }); const plot = new Plot(map); plot.plotDraw.activate(plot.PlotTypes.CIRCLE); // 进入画圆模式

看懂 3 个核心成员：画、改、存 🔍

拿到plot实例后，你只需要认识三个东西，源码都在packages/ol-plot/src/core/下，每个就是一个文件，非常好读：

• plotDraw（画笔）：activate(type)开始画，deactivate()收起。
• plotEdit（修改器）：选中某个符号后，拖动顶点就能改形状。
• plotUtils（存档）：把地图上所有符号序列化成 JSON，下次再还原回来。

type传什么？PlotTypes枚举里一共 28 种，比如ATTACK_ARROW（进攻箭头）、GATHERING_PLACE（集结地）、SECTOR（扇形）。每种符号对应packages/ol-plot/src/geometry/里的一个类，想看哪种实现就翻哪个目录。

进阶玩法：存符号、换样式、直接用 Vue 组件 🧩

画完的符号想持久化？两个方法就够：

plot.plotDraw.on('drawEnd', (e) => { console.log(e.feature); // 刚画完的要素 }); const features = plot.plotUtils.getFeatures(); // 保存 plot.plotUtils.addFeatures(features); // 恢复

想换默认颜色和线宽？activate(type, params)的第二个参数就是样式对象。想深度换皮肤，看静态属性Plot.StyleFactory。

用 Vue 的同学可以省掉自己画工具栏的功夫：配套的ol-plot-vue组件把符号列表、背景色/边框色选择、线宽和透明度滑块全做进面板里了，完整效果见playground/vue3示例。

<template> <ol-plot-vue :map="map" /> </template>

新手 3 个坑，提前避开 🕳️

1. 忘了引 CSS。ol-plot.css不引，文本框编辑器和一些交互样式会直接失灵，而且不一定报错，排查起来很费时间。
2. 事件绑错地方。activeTextArea这类事件，3.0 版绑在 map 实例上，4.0 起必须绑在 plot 实例上（plot.on(...)），网上老教程容易把你带偏。
3. 编辑和绘制打架。用户正在改符号时你又激活了新工具，先plot.plotEdit.deactivate()再plotDraw.activate()，否则状态错乱、地图点不动。

小结 🎯

ol-plot 把 OpenLayers 标绘压缩成一句话：new Plot(map)，然后activate一个类型。想深入，直接照着playground/下的 single、vue2、vue3 三套示例抄，就是完整的标绘配置教程。

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