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