zoukankan      html  css  js  c++  java
  • 基于leaflet的标绘功能(一)--可调整的圆

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

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

    初步的效果请查看视频

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

    图形设计问题

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

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

    数据存储问题

    1、自动存储

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

    2、手动存储

    提供保存按钮进行存储。

    多人协同问题

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

    源码

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

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

  • 相关阅读:
    hdu 1669(二分+多重匹配)
    hdu 2389(最大匹配bfs版)
    hdu 3118(二进制枚举)
    计算机常用端口一览表
    自制EIGRP配置实验大全
    自制EIGRP配置实验大全
    《生成树选举口诀》【转载】
    CCNA基础知识摘录
    对eigrp默认网络的理解!
    对eigrp默认网络的理解!
  • 原文地址:https://www.cnblogs.com/giserhome/p/11789001.html
Copyright © 2011-2022 走看看