ol-plot一次调用在 OpenLayers 上画出 20 多种地图标绘符号从零快速上手【免费下载链接】ol-plot:art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘项目地址: https://gitcode.com/gh_mirrors/ol/ol-plot为什么值得试ol-plot 是给 OpenLayers 5 / 6 / 7 用的轻量标绘扩展一句话定位在 OpenLayers 上做交互式地图标绘。手搓 SVG 叠加层画进攻箭头、自由面路径生成、顶点编辑、样式全得自己维护改一处崩三处。ol-plot 把这些符号的绘制、编辑、序列化都封装好了20 多种标绘类型开箱就能画画完的点线箭头还能序列化存库。下面是官方案例里的实际效果右侧工具栏 地图上画好的面它能替你干哪几件事画标准地图标绘符号指挥标图场景点击选中就能拖拽编辑标注细调场景画进攻方向、战斗行动箭头军标场景把全部符号序列化成 JSON保存与恢复场景换 Vue 项目可直接用 ol-plot-vue快速搭面板场景从装 ol-plot 到跑通地图标绘最短路径第 1 步 装依赖npm 或 yarn 任选一行npm install ol-plot yarn add ol-plot第 2 步 建图并初始化标绘工具。这段在干什么建一张最简 OSM 底图new 出 Plot 实例然后一次调用激活点标绘——⚠️ CSS 必须单独引否则符号没样式import ol/ol.css; import ol-plot/dist/ol-plot.css; import { Map, View } from ol; import { Tile } from ol/layer; import { OSM } from ol/source; import Plot from ol-plot; 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, { zoomToExtent: true }); plot.plotDraw.activate(Plot.PlotTypes.POINT);第 3 步 换符号类型、接上结束事件。这段在干什么把类型换成进攻箭头画完自动打印可存库的 JSON。✅ 到这一步就算跑通了plot.plotDraw.activate(Plot.PlotTypes.ATTACK_ARROW); plot.plotDraw.on(drawEnd, (e) { console.log(plot.plotUtils.getFeatures()); });想看带工具栏的完整页面仓库里 playground/ 有 single / vue2 / vue3 三个可直接跑的工程所有符号的几何实现都在 packages/ol-plot/src/geometry/ 下一个类型一个目录。跑通之后立刻可以做的 3 件事把activate的类型参数循环切换一遍PlotTypes先摸熟每种符号的画法监听plot.plotEdit的activePlotChange事件把当前编辑的符号接进你自己的撤销栈在drawEnd回调里调plot.plotUtils.getFeatures()落库下次打开用addFeatures一键还原和谁搭配更顺手OpenLayers —— 它就是你的地图底座标绘 feature 和业务 feature 共用同一个 map 实例与图层体系不用再加适配层ol-plot-vue —— Vue 项目直接挂这个组件工具栏 样式参数面板的 UI 整套拿来就用省掉自己写面板你手头的任何存储MySQL / Mongo / 文件—— 符号能整体序列化成 JSON存进去、取出来标注就从画一次变成画一次、看一辈子现在就把第 2 步的代码贴进你的 OpenLayers 项目把ATTACK_ARROW换成GATHERING_PLACE再画一次——三分钟内就能判断这个库配不配得上你的标图需求。【免费下载链接】ol-plot:art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘项目地址: https://gitcode.com/gh_mirrors/ol/ol-plot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考