基于leaflet的标绘功能(一)--可调整的圆
标绘功能是指在电子地图上可以标注点、线、面、复杂多边形等图形。主要操作包括上图、调整(大小、方向、位置)、网络存储等。根据具体的业务场景,也可以做到协同标绘等特色功能。其中,要求每个图形有若干关键点控制。目前,很多系统实现的都未达到易用要求,大多只支持贴图或较少的控制点。因此,本系列文章是致力于构建一套较为完整的技术方案解决上述问题。
上面描述的可能没有表达清楚,还是看视频比较好理解。
初步的效果请查看视频
将圆上图之后,点击圆,激活编辑功能,同时显示两个关键点(此时无法拖动地图)。支持鼠标拖动圆调整位置。通过鼠标拖拽圆周上的控制点调整圆的半径。松开鼠标,取消编辑功能。
图形设计问题
整个流程中控制点的调整联动是关键,如何设计关键点的位置关系,关联关系,一个控制点调整后,其他控制点如何变化。控制点之间的连接采用直线还是其他形式的曲线。每个图形各个边之间夹角。这些都需要文字来规范。
可以关注一下贝塞尔曲线。
数据存储问题
1、自动存储
每次鼠标调整操作触发一次存储请求。
2、手动存储
提供保存按钮进行存储。
多人协同问题
可能需要在后端设计锁来解决多人协同时数据矛盾的问题。
源码
完整demo源码见小专栏文章尾部:GIS之家leaflet小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
基于leaflet的标绘功能(一)--可调整的圆的更多相关文章
- 基于openlayers2军事标绘,开源
1.其实各GIS公司.网络上 都会有提供 军事标绘的功能,如arcgis 的,超图的.mapgis的:但大多数是非开源.且收费的.2.在这里要感谢超图,超图开源了标绘扩展符号库,我这里使用的就是超图的 ...
- arcgis api for js入门开发系列五地图态势标绘(含源代码)
上一篇实现了demo的地图查询功能,本篇新增地图态势标绘模块,截图如下: 本篇核心的在于调用API的Draw工具:https://developers.arcgis.com/javascript/3/ ...
- arcgis api 3.x for js 入门开发系列五地图态势标绘(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- 基于ArcGIS Flex API实现动态标绘(1.0)
标绘作为一种数据展示形式,在多个行业都有需求. 基于ArcGIS Flex API(3.6)实现标绘API,当前版本号1.0 alpha,支持经常使用几种标绘符号,包含: 圆弧.曲线.圆形.椭圆.弓形 ...
- 基于ArcGIS Flex API实现动态标绘(1.1)
动态标绘API 1.1版本号.相较前一版本号1.0(点击进入).该版本号提供标绘符号的编辑功能. 编辑功能包含两种编辑状态:编辑控制点.对标绘符号进行旋转.八方向拉伸.平移. 编辑控制点例如以下图所看 ...
- 基于ArcGIS Flex API实现动态标绘(1.2)
动态标绘API 1.2,相较前一版本号(点击进入),该版本号新增对基本标绘符号的支持,包含: 单点.多点.折线.手绘线.多边形.手绘多边形.矩形,并提供对应的编辑功能. 例如以下图所看到的,对多点的编 ...
- 标绘ol3版开源啦
地址:git.oschina.net/ilocation/plot By 平凡的世界 plot4ol3 说明 基于OpenLayers3实现动态标绘API. 在线体验 :7xr2vb.com1.z0. ...
- 动态标绘演示系统1.4.3(for ArcGIS Flex)
标绘有API文档啦! 在线浏览 ------------------------------------------------------------------------------------ ...
- 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(十)态势标绘模块
config.xml文件的配置如下: <widget label="态势标绘" icon="assets/images/impact_area_over.png&q ...
随机推荐
- css3 svg 物体跟随路径动画教程
css3 svg 物体跟随路径动画教程https://www.jianshu.com/p/992488f3f3fc
- 20190806-sed面试题
由于比较难,附上PPT,没事还得看 下载:https://www.lanzous.com/i5cs9aj 密码:arka 1.删除centos7系统/etc/grub2.cfg⽂件中所有以空⽩开头的⾏ ...
- [LC]783题 二叉搜索树结点最小距离(中序遍历)
①题目 给定一个二叉搜索树的根结点 root, 返回树中任意两节点的差的最小值. 示例: 输入: root = [4,2,6,1,3,null,null]输出: 1解释:注意,root是树结点对象(T ...
- Kali Rolling 系统配置总结 (Updateing)
主系统Kali Linux确实好用,继<Kali~2018安装后的配置>之后,自己又全面详细的总结了关于Kali Linux系统安装后的配置,<Kali Rolling 系统配置总结 ...
- 看源码学编程系列之kafka(一)
kafka 由于它自身的高性能发送与消费能力,而受到广大企业的喜欢,所以我们就先看看kafka 一些源码实现如下: public void run() { int messageNo = 1; whi ...
- C语言程序设计100例之(17):百灯判亮
例17 百灯判亮 问题描述 有序号为1.2.3.….99.100的100盏灯从左至右排成一横行,且每盏灯各由一个拉线开关控制着,最初它们全呈关闭状态.有100个小朋友,第1位走过来把凡是序号为1的 ...
- python: __future__的介绍
__future__ 给旧版本python提供新版本python的特性例如: 在python2.X中可以使用print"" 也可以使用print() 但是加载这个print的新特性 ...
- 【集合系列】- 深入浅出的分析IdentityHashMap
一.摘要 在集合系列的第一章,咱们了解到,Map 的实现类有 HashMap.LinkedHashMap.TreeMap.IdentityHashMap.WeakHashMap.Hashtable.P ...
- Pod镜像拉取策略imagePullPolicy
默认值是IfNotPresent Always 总是拉取: 首先获取仓库镜像信息, 如果仓库中的镜像与本地不同,那么仓库中的镜像会被拉取并覆盖本地. 如果仓库中的镜像与本地一致,那么不会拉取镜像. 如 ...
- [ch04-02] 用梯度下降法解决线性回归问题
系列博客,原文在笔者所维护的github上:https://aka.ms/beginnerAI, 点击star加星不要吝啬,星越多笔者越努力. 4.2 梯度下降法 有了上一节的最小二乘法做基准,我们这 ...