基于leaflet的标绘功能（一）--可调整的圆

 

 

标绘功能是指在电子地图上能够标注点、线、面、复杂多边形等图形。主要操做包括上图、调整（大小、方向、位置）、网络存储等。根据具体的业务场景，也能够作到协同标绘等特点功能。其中，要求每一个图形有若干关键点控制。目前，不少系统实现的都未达到易用要求，大多只支持贴图或较少的控制点。所以，本系列文章是致力于构建一套较为完整的技术方案解决上述问题。

上面描述的可能没有表达清楚，仍是看视频比较好理解。

初步的效果请查看视频

将圆上图以后，点击圆，激活编辑功能，同时显示两个关键点（此时没法拖动地图）。支持鼠标拖动圆调整位置。经过鼠标拖拽圆周上的控制点调整圆的半径。松开鼠标，取消编辑功能。

图形设计问题

整个流程中控制点的调整联动是关键，如何设计关键点的位置关系，关联关系，一个控制点调整后，其余控制点如何变化。控制点之间的链接采用直线仍是其余形式的曲线。每一个图形各个边之间夹角。这些都须要文字来规范。

能够关注一下贝塞尔曲线。

数据存储问题

一、自动存储

每次鼠标调整操做触发一次存储请求。

二、手动存储

提供保存按钮进行存储。

多人协同问题

可能须要在后端设计锁来解决多人协同时数据矛盾的问题。

源码

完整demo源码见小专栏文章尾部：GIS之家leaflet小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，能够关注一波