ol-plot：3 步给 OpenLayers 地图加上标绘功能的实战指南

ol-plot3 步给 OpenLayers 地图加上标绘功能的实战指南【免费下载链接】ol-plot:art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘项目地址: https://gitcode.com/gh_mirrors/ol/ol-plotol-plot 是一个基于 OpenLayers 的开源标绘库。所谓标绘就是在地图上绘制点、线、面和各类战术符号。它内置了 20 多种标绘符号从点、线、矩形到进攻方向、战斗行动箭头都有画完还能选中编辑、序列化存储适合做指挥展示、态势标绘这类地图应用。一句话说清它帮你做什么如果你用过 OpenLayers一个用 JavaScript 画 Web 地图的库的 Draw 交互知道画一条线要自己拼交互、自己写样式。ol-plot 把这些封装好了画调用一个方法就激活某种标绘工具用户在地图上直接画改点中已画的符号就能拖动、编辑存一键把地图上的符号序列化成数据下次再反序列化恢复3 步把标绘装进项目ol-plot 依赖 OpenLayers两个包都要装npm install ol-plot npm install ol拿到一个 Map 实例后初始化并激活标绘import ol-plot/dist/ol-plot.css; import Plot from ol-plot; const plot new Plot(map); plot.plotDraw.activate(Point); // 激活点标绘 plot.plotEdit.activate(feature); // 选中某个符号进入编辑绘制结束时监听drawEnd事件拿到 feature 即可更多事件与参数见 README。完整的可运行示例在 playground/single照着改就行。能画哪些符号常用方法有哪些标绘类型都挂在plot.PlotTypes上常见的有基础几何MARKER点、POLYLINE线、POLYGON面、CIRCLE、ELLIPSE、RECTANGLE、FREEHAND_LINE自由手绘线战术符号ATTACK_ARROW进攻方向、STRAIGHT_ARROW细直箭头、SQUAD_COMBAT战斗行动、GATHERING_PLACE集结地等日常开发主要碰这几组方法场景方法开始/停止画某种符号plot.plotDraw.activate(type)/deactivate()编辑/退出编辑plot.plotEdit.activate(feature)/deactivate()存取数据plot.plotUtils.getFeatures()/addFeatures(arr)/removeAllFeatures()注意getFeatures会序列化地图上所有符号addFeatures能把存过的数据原样画回去——保存一张态势图就是这两个方法的事。用 Vue 的话直接上 ol-plot-vue 组件项目同时发布了一个配套的 Vue 组件包ol-plot-vue把标绘面板符号列表 颜色、透明度设置都做好了支持 Vue 2 和 Vue 3import Plot from ol-plot-vue; app.use(Plot);模板里写一行ol-plot-vue :mapmap /一个带完整工具栏的标绘面板就出来了。效果就是文首截图里右侧那个应急标绘面板用法可参考 playground/vue3。什么时候该选它和谁一起用适合的场景应急指挥、军事标绘、GIS 标注工具——需要画标准战术符号、且要求符号能存能改的应用。搭配建议OpenLayers它本身就是 OpenLayers 的扩展地图、瓦片、投影这些继续用 OpenLayers 做Turf.js需要对标绘结果做缓冲区、距离分析时可以直接把导出的坐标交给它算你的业务后端getFeatures返回的数据结构可以直接入库回显时用addFeatures还原如果你需要在地图上画标准战术符号又懒得从零拼交互ol-plot 是目前 OpenLayers 生态里上手最快的选择装包、new 一下、activate 就能画。【免费下载链接】ol-plot:art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘项目地址: https://gitcode.com/gh_mirrors/ol/ol-plot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考