ol-plot 地图标绘库快速上手指南【免费下载链接】ol-plot:art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘项目地址: https://gitcode.com/gh_mirrors/ol/ol-plotol-plot 是基于 OpenLayers 的地图标绘扩展库支持 OpenLayers 5 / 6 / 7。它能让你在地图上直接画出椭圆、箭头、曲线、旗帜等 20 多种标准标绘符号画完还能点击编辑、序列化保存。做指挥标图、态势标注、区域划定的同学用它不用再自己撸 Draw 交互。它能干什么简单说画符号、改样式、编辑符号、存数据四件事。一次画 20 多种符号点、线、面、椭圆、扇形、闭合曲线、各种箭头、旗帜、文本框……每个符号都封装好了鼠标交互逻辑画完可编辑点中任意符号就能拖动控制点改形状数据可进可出plotUtils.getFeatures()把图上的符号序列化成数组addFeatures()又能反序列化画回来存数据库、跨页面恢复都很方便官方还配了一个 Vue 组件图标工具栏 颜色/线宽/透明度参数面板直接给你做好了五分钟跑起来npm install ol-plot装好之后核心就三步建一个普通 OpenLayers 地图、new Plot(map)挂上去、调plotDraw.activate激活某个符号工具。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, view: new View({ center: [0, 0], zoom: 2 }), layers: [new Tile({ source: new OSM() })], }); const plot new Plot(map); // 标绘入口就这一行跑起来后地图容器里标绘层已经就位。接着激活你要画的符号就行// 画一个红框、半透明填充的椭圆 plot.plotDraw.activate(Plot.PlotTypes.ELLIPSE, { fillColor: rgba(255, 0, 0, 0.3), strokeColor: red, strokeWidth: 2, }); plot.plotDraw.deactivate(); // 画完就关掉工具 // 点中已画好的符号进入编辑状态 plot.plotEdit.activate(feature);类型常量都在Plot.PlotTypes上ELLIPSE、CURVE、POLYGON、ATTACK_ARROW、TRIANGLE_FLAG、TEXTAREA……名字都是直白的英文大写对着用就行。改标绘样式和参数不用改源码三个地方调参就能定制外观参数在哪传作用layerNamenew Plot(map, { layerName })标绘矢量层名方便你按名字找到这个图层zoomToExtentnew Plot(map, { zoomToExtent })画完后是否自动缩放到符号范围fillColor/strokeColor/strokeWidthactivate(type, params)的第二个参数控制每个符号的填充色、边框色、线宽Vue 场景更省事装ol-plot-vue把组件扔进模板参数面板背景色、边框色、线宽、透明度是现成的源码就在packages/ol-plot-vue/src/plot.vue想改面板样式直接看它。源码长什么样仓库是个 monorepo结构不长带你对一遍ol-plot/ ├── packages/ │ ├── ol-plot/ # 核心标绘库就是 npm 上的 ol-plot │ │ └── src/ │ │ ├── index.ts # 入口olPlot 类内部就是 plotDraw / plotEdit / plotUtils 三个模块 │ │ ├── core/ # PlotDraw 画、PlotEdit 改、PlotUtils 序列化交互逻辑全在这 │ │ ├── geometry/ # 每种标绘符号一个目录一类文件一个符号 │ │ └── utils/ # PlotTypes 类型常量、factory 样式工厂 │ └── ol-plot-vue/ # Vue 封装组件工具栏 参数面板 ├── playground/ # 三个可直接跑的 demosingle / vue2 / vue3 └── vitest/ # 测试环境配置看入口packages/ol-plot/src/index.ts你会发现olPlot类本身很薄构造函数里 new 了PlotDraw、PlotEdit、PlotUtils三个对象就完事了。想搞懂绘制交互去读core/PlotDraw.ts想加一种新符号去geometry/抄一个现有符号改再在utils/PlotTypes.ts注册类型套路是统一的。更多示例和贡献想直接看效果playground/single是最轻的纯 JS 示例playground/vue3是带完整工具栏的 Vue 版对着跑pnpm run dev就行测试代码在packages/ol-plot/src/__tests__/下根目录vitest/setupTests.ts是测试环境配置pnpm run test跑全量想提代码先读 CONTRIBUTING.mdPR 提到dev分支commit 带上 issue 编号别提交打包后的 dist 文件下一步把playground/single跑起来对着index.ts里的activate调用把你业务里第一个符号画到地图上。【免费下载链接】ol-plot:art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘项目地址: https://gitcode.com/gh_mirrors/ol/ol-plot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考