ol-plot 快速上手5 分钟给 OpenLayers 地图加上标绘功能的完整指南【免费下载链接】ol-plot:art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘项目地址: https://gitcode.com/gh_mirrors/ol/ol-plotol-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 :mapmap / /template新手 3 个坑提前避开 ️忘了引 CSS。ol-plot.css不引文本框编辑器和一些交互样式会直接失灵而且不一定报错排查起来很费时间。事件绑错地方。activeTextArea这类事件3.0 版绑在 map 实例上4.0 起必须绑在 plot 实例上plot.on(...)网上老教程容易把你带偏。编辑和绘制打架。用户正在改符号时你又激活了新工具先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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考