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

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

初步的效果请查看视频

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

图形设计问题

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

可以关注一下贝塞尔曲线。

数据存储问题

1、自动存储

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

2、手动存储

提供保存按钮进行存储。

多人协同问题

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

源码

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

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

基于leaflet的标绘功能（一）--可调整的圆的更多相关文章

  1. 基于openlayers2军事标绘，开源

    1.其实各GIS公司.网络上 都会有提供 军事标绘的功能,如arcgis 的,超图的.mapgis的:但大多数是非开源.且收费的.2.在这里要感谢超图,超图开源了标绘扩展符号库,我这里使用的就是超图的 ...

  2. arcgis api for js入门开发系列五地图态势标绘(含源代码)

    上一篇实现了demo的地图查询功能,本篇新增地图态势标绘模块,截图如下: 本篇核心的在于调用API的Draw工具:https://developers.arcgis.com/javascript/3/ ...

  3. arcgis api 3.x for js 入门开发系列五地图态势标绘（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. 基于ArcGIS Flex API实现动态标绘（1.0）

    标绘作为一种数据展示形式,在多个行业都有需求. 基于ArcGIS Flex API(3.6)实现标绘API,当前版本号1.0 alpha,支持经常使用几种标绘符号,包含: 圆弧.曲线.圆形.椭圆.弓形 ...

  5. 基于ArcGIS Flex API实现动态标绘（1.1）

    动态标绘API 1.1版本号.相较前一版本号1.0(点击进入).该版本号提供标绘符号的编辑功能. 编辑功能包含两种编辑状态:编辑控制点.对标绘符号进行旋转.八方向拉伸.平移. 编辑控制点例如以下图所看 ...

  6. 基于ArcGIS Flex API实现动态标绘（1.2）

    动态标绘API 1.2,相较前一版本号(点击进入),该版本号新增对基本标绘符号的支持,包含: 单点.多点.折线.手绘线.多边形.手绘多边形.矩形,并提供对应的编辑功能. 例如以下图所看到的,对多点的编 ...

  7. 标绘ol3版开源啦

    地址:git.oschina.net/ilocation/plot By 平凡的世界 plot4ol3 说明 基于OpenLayers3实现动态标绘API. 在线体验 :7xr2vb.com1.z0. ...

  8. 动态标绘演示系统1.4.3（for ArcGIS Flex）

    标绘有API文档啦! 在线浏览 ------------------------------------------------------------------------------------ ...

  9. 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（十）态势标绘模块

    config.xml文件的配置如下: <widget label="态势标绘" icon="assets/images/impact_area_over.png&q ...

随机推荐

  1. 05-商品类别数据和VUE展示

    一.商品类别数据和VUE展示 1.商品类别数据接口 将商品类别数据展示出来,视图(views.py)代码如下: class CategoryViewset(mixins.ListModelMixin, ...

  2. lqb 基础练习 特殊的数字

    基础练习 特殊的数字 时间限制:1.0s   内存限制:512.0MB     问题描述 153是一个非常特殊的数,它等于它的每位数字的立方和,即153=1*1*1+5*5*5+3*3*3.编程求所有 ...

  3. 力扣（LeetCode）学生出勤记录I 个人题解

    给定一个字符串来代表一个学生的出勤记录,这个记录仅包含以下三个字符: 'A' : Absent,缺勤 'L' : Late,迟到 'P' : Present,到场 如果一个学生的出勤记录中不超过一个' ...

  4. bash:裁剪字符串 ${var:3:2}

    1)按照index和长度裁剪变量字符串var=foobar echo ${var:3} -------bar echo ${var:3:2} -------ba 从index为3开始,取两个echo ...

  5. 实现websocket 主动消息推送，用laravel+Swoole

    近来有个需求:想实现一个可以主动触发消息推送的功能,这个可以实现向模板消息那个,给予所有成员发送自定义消息,而不需要通过客户端发送消息,服务端上message中监听传送的消息进行做相对于的业务逻辑. ...

  6. hopper反汇编工具的逆向伪代码功能并不理想

    hopper的逆向代码功能并不如想象中那么好,尤其是在逆向c++代码时.对于从ObjC进入iOS开发又不太清楚运行时的人员来说,hopper可以将反汇编码输出成[obj selector:what]这 ...

  7. react路由的动态传参

    ① 定义规则 ②传值 ③获取传过来的值

  8. react antd Table动态合并单元格

    示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...

  9. PostGIS mysql_fdw操作日志（留观）

    #####Linux终端操作命令记录,留做自己后面研究,绿色部分为成功部分 错误: 服务器"mysql_server" 不存在postgres=# create user mapp ...

  10. 【Luogu P3384】树链剖分模板

    树链剖分的基本思想是把一棵树剖分成若干条链,再利用线段树等数据结构维护相关数据,可以非常暴力优雅地解决很多问题. 树链剖分中的几个基本概念: 重儿子:对于当前节点的所有儿子中,子树大小最大的一个儿子就 ...