ol-plot 快速上手5 分鐘給 OpenLayers 地圖加上標(biāo)繪功能的完整指南【免費(fèi)下載鏈接】ol-plot:art: | openalyers 3 / 4 / 5 / 6 / 7 擴(kuò)展標(biāo)繪項(xiàng)目地址: https://gitcode.com/gh_mirrors/ol/ol-plotol-plot 是一個專門給 OpenLayers支持 5 / 6 / 7 版本加標(biāo)繪能力的開源庫。標(biāo)繪就是指揮圖上常用的那套戰(zhàn)術(shù)符號進(jìn)攻箭頭、集結(jié)地、弓形、扇形、旗幟。不用它你得手寫一堆幾何代碼用它之后在地圖上畫兩下就有了。適合正在做 WebGIS 應(yīng)用、想快速給地圖加上符號繪制與編輯功能的開發(fā)者。3 步跑起來從安裝到畫出第一個符號 第一步裝依賴npm install ol-plot。第二步建一張地圖。第三步 new 一個實(shí)例掛上去就能畫了。手頭沒有項(xiàng)目的話先拉一份倉庫看示例git clone https://gitcode.com/gh_mirrors/ol/ol-plot再執(zhí)行pnpm install pnpm run dev重點(diǎn)看playground/single這套原生示例。下面這段是最小可運(yùn)行代碼建一張 OSM 底圖掛上標(biāo)繪進(jìn)入畫圓模式。跑起來后鼠標(biāo)點(diǎn)地圖就能落點(diǎn)畫圓雙擊收筆。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); // 進(jìn)入畫圓模式看懂 3 個核心成員畫、改、存 拿到plot實(shí)例后你只需要認(rèn)識三個東西源碼都在packages/ol-plot/src/core/下每個就是一個文件非常好讀plotDraw畫筆activate(type)開始畫deactivate()收起。plotEdit修改器選中某個符號后拖動頂點(diǎn)就能改形狀。plotUtils存檔把地圖上所有符號序列化成 JSON下次再還原回來。type傳什么PlotTypes枚舉里一共 28 種比如ATTACK_ARROW進(jìn)攻箭頭、GATHERING_PLACE集結(jié)地、SECTOR扇形。每種符號對應(yīng)packages/ol-plot/src/geometry/里的一個類想看哪種實(shí)現(xiàn)就翻哪個目錄。進(jìn)階玩法存符號、換樣式、直接用 Vue 組件 畫完的符號想持久化兩個方法就夠plot.plotDraw.on(drawEnd, (e) { console.log(e.feature); // 剛畫完的要素 }); const features plot.plotUtils.getFeatures(); // 保存 plot.plotUtils.addFeatures(features); // 恢復(fù)想換默認(rèn)顏色和線寬activate(type, params)的第二個參數(shù)就是樣式對象。想深度換皮膚看靜態(tài)屬性Plot.StyleFactory。用 Vue 的同學(xué)可以省掉自己畫工具欄的功夫配套的ol-plot-vue組件把符號列表、背景色/邊框色選擇、線寬和透明度滑塊全做進(jìn)面板里了完整效果見playground/vue3示例。template ol-plot-vue :mapmap / /template新手 3 個坑提前避開 ?忘了引 CSS。ol-plot.css不引文本框編輯器和一些交互樣式會直接失靈而且不一定報錯排查起來很費(fèi)時間。事件綁錯地方。activeTextArea這類事件3.0 版綁在 map 實(shí)例上4.0 起必須綁在 plot 實(shí)例上plot.on(...)網(wǎng)上老教程容易把你帶偏。編輯和繪制打架。用戶正在改符號時你又激活了新工具先plot.plotEdit.deactivate()再plotDraw.activate()否則狀態(tài)錯亂、地圖點(diǎn)不動。小結(jié) ol-plot 把 OpenLayers 標(biāo)繪壓縮成一句話new Plot(map)然后activate一個類型。想深入直接照著playground/下的 single、vue2、vue3 三套示例抄就是完整的標(biāo)繪配置教程?！久赓M(fèi)下載鏈接】ol-plot:art: | openalyers 3 / 4 / 5 / 6 / 7 擴(kuò)展標(biāo)繪項(xiàng)目地址: https://gitcode.com/gh_mirrors/ol/ol-plot創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考