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），僅供參考