天天看點

基于leaflet的标繪功能(一)--可調整的圓

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

基于leaflet的标繪功能(一)--可調整的圓
基于leaflet的标繪功能(一)--可調整的圓
上面描述的可能沒有表達清楚,還是看視訊比較好了解。

初步的效果請檢視視訊

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

圖形設計問題

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

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

資料存儲問題

1、自動存儲

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

2、手動存儲

提供儲存按鈕進行存儲。

多人協同問題

可能需要在後端設計鎖來解決多人協同時資料沖突的問題。

源碼

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

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

GIS之家作品店鋪:GIS之家作品店鋪

GIS之家源碼咨詢:GIS之家webgis入門開發系列demo源代碼咨詢

繼續閱讀