基於leaflet的標繪功能（一）--可調整的圓

 

 

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

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

初步的效果請查看視頻

將圓上圖以後，點擊圓，激活編輯功能，同時顯示兩個關鍵點（此時沒法拖動地圖）。支持鼠標拖動圓調整位置。經過鼠標拖拽圓周上的控制點調整圓的半徑。鬆開鼠標，取消編輯功能。

圖形設計問題

整個流程中控制點的調整聯動是關鍵，如何設計關鍵點的位置關係，關聯關係，一個控制點調整後，其餘控制點如何變化。控制點之間的鏈接採用直線仍是其餘形式的曲線。每一個圖形各個邊之間夾角。這些都須要文字來規範。

能夠關注一下貝塞爾曲線。

數據存儲問題

一、自動存儲

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

二、手動存儲

提供保存按鈕進行存儲。

多人協同問題

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

源碼

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

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