基於leaflet的標繪功能(一)--可調整的圓


 

 

標繪功能是指在電子地圖上可以標注點、線、面、復雜多邊形等圖形。主要操作包括上圖、調整(大小、方向、位置)、網絡存儲等。根據具體的業務場景,也可以做到協同標繪等特色功能。其中,要求每個圖形有若干關鍵點控制。目前,很多系統實現的都未達到易用要求,大多只支持貼圖或較少的控制點。因此,本系列文章是致力於構建一套較為完整的技術方案解決上述問題。

上面描述的可能沒有表達清楚,還是看視頻比較好理解。

初步的效果請查看視頻

將圓上圖之后,點擊圓,激活編輯功能,同時顯示兩個關鍵點(此時無法拖動地圖)。支持鼠標拖動圓調整位置。通過鼠標拖拽圓周上的控制點調整圓的半徑。松開鼠標,取消編輯功能。

圖形設計問題

整個流程中控制點的調整聯動是關鍵,如何設計關鍵點的位置關系,關聯關系,一個控制點調整后,其他控制點如何變化。控制點之間的連接采用直線還是其他形式的曲線。每個圖形各個邊之間夾角。這些都需要文字來規范。

可以關注一下貝塞爾曲線。

數據存儲問題

1、自動存儲

每次鼠標調整操作觸發一次存儲請求。

2、手動存儲

提供保存按鈕進行存儲。

多人協同問題

可能需要在后端設計鎖來解決多人協同時數據矛盾的問題。

源碼

完整demo源碼見小專欄文章尾部GIS之家leaflet小專欄

文章尾部提供源代碼下載,對本專欄感興趣的話,可以關注一波


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM