GIS前端编程-Leaflet前端扩展开发实践

GIS前端编程-Leaflet前端扩展开发实践

    • 需求概述
    • 插件扩展开发
    • 1. 军标绘制功能实现原理
    • 2. 基于Leaflet军标绘制扩展原理
    • (1)扩展军标图形(L.FeatureGroup类扩展)。
    • (2)扩展绘图工具(L.Evented类扩展)。
    • (3)扩展编辑工具(L.Handler类扩展)。
    • 3. 军标绘制功能实现方法

需求概述

随着遥感技术、全球定位系统、因特网和地理信息系统等现代信息技术之间的相互渗透,逐渐形成以地理信息系统为核心的集成化技术系统,并在资源调查、环境评估、区域发展规划、公共设施管理、交通安全、军事等领域得到了广泛应用。军标绘制与动态模拟是GIS在军事领域的应用,充分利用网络环境进行军事作战模拟、虚拟作战演习等。军标绘制与普通图形绘制有很大区别,需要绘制的军标图形种类众多且结构复杂,更重要的是军标图形需要表达一定的态势走向,并且需要实现客户端交互操作。常见的军标绘制类型包括简单箭头、燕尾箭头、自定义箭头、自定义燕尾箭头、直箭头、双箭头、集结区域、圆形区域、曲线旗标、直角旗标、三角旗标等。

插件扩展开发

实现插件的扩展开发,用户要结合实际需求的情况,充分了解开发原理和方法,才能高效地进行开发工作。

1. 军标绘制功能实现原理

为了实现军标绘制功能,需要基于Leaflet对原有基本图形进行扩展,实现常用军标图形的绘制,同时提供了一套集添加、删除、修改为一体的图形绘制接口,以满足用户的各类需求。
军标绘制中的各类图形主要基于贝塞尔曲线原理,通过Leaflet的插件扩展开发实现。
贝塞尔曲线由法国工程师皮埃尔·贝塞尔(Pierre Bézier)于1962年提出,他运用贝塞尔曲线来对汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau算法开发,以稳定数值的方法求出贝塞尔曲线,又被称为贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线,一般的矢量图形软件通过它来精确画出曲线。贝赛尔曲线由线段与节点组成,节点是可拖动的支点。
贝塞尔曲线包含线性、二次方贝赛尔曲线、三次方贝塞尔曲线,在绘图领域比较常用的是二次方贝赛尔曲线和三次方贝塞尔曲线。
(1)二次方贝塞尔曲线。二次方贝塞尔曲线的路径由给定点P0、P1、P2的函数B(t)给定。

(2)三次方贝塞尔曲线。P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝塞尔曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1或P2,这两个点只是提供方向信息。P0和P1之间的间距决定了曲线在转而趋近P3之前,走向P2方向的长度有多长。

2. 基于Leaflet军标绘制扩展原理

基于Leaflet的继承扩展功能来编写多种贝塞尔曲线算法。同时,还需要扩展Leaflet提供的L.FeatureGroup、L.Evented和L.Handler等类,以实现军标与指北针等特殊图形的绘制、编辑、删除等功能。军标绘制功能扩展原理如图
在这里插入图片描述

(1)扩展军标图形(L.FeatureGroup类扩展)。

Leaflet自带的几何类型包括Circle、Polyline、Polygon、Rectangle等,几何结构相对较简单。而用于军标绘制的各种箭头、指北针等类型都是比较复杂的几何类型,通常由多种几何类型组成。
对复杂的军标图形,Leaflet没有可供组合的几何类型,为实现该类应用最好的办法是扩展Leaflet的FeatureGroup图层类。因此,我们在L.FeatureGroup类的基础上进行了继承扩展,包含9种指北针类型、4种箭头类型、3种旗帜类型、3种集结区类型的军标图形。

(2)扩展绘图工具(L.Evented类扩展)。

对于Leaflet自带的几何类型,可以通过现有的绘图工具插件(如L.Draw)中的扩展类进行绘制。如果要绘制自定义扩展的军标,则需要针对军标图形的特点进行绘图工具的自定义扩展。因此,本实例基于Leaflet的L.Evented类扩展绘图工具(MilStd.MilStdDrawTool类)实现军标绘制功能。同时,为了方便用户操作这些图形,本实例还实现了对军标图形进行修改、移动、删除等编辑操作。

(3)扩展编辑工具(L.Handler类扩展)。

客户端通过调用Leaflet提供的Handler类,来对几何图形进行交互操作,而Leaflet原有的Handler类并不包含新增加的军标几何类型的交互处理事件,客户端无法直接编辑军标几何扩展类。于是,我们将Leaflet原有的Handler类进行了扩展,即基于L.Handler类分别扩展针对新几何图形的修改工具(MilStd.ModifyTool类)和移动工具(MilStd.DragPan类),用于实现对军标图形进行修改和移动等编辑操作。
通过上述方法,基于Leaflet扩展军标、指北针等特殊的几何图形的工作就完成了。用户在客户端操作时,只需通过鼠标创建几个控制点,即可绘制出对应的特殊图形。其中,使用贝赛尔曲线提供的各种算法可以通过几个控制点计算出特殊图形所有点信息,即扩展的MilStd.Arrow类(箭头算法)、Milstd.Compass类(指北针算法)、MilStd.Flag类(旗帜算法)、MilStd.Bezier类(集结区算法)和Milstd.commonFun类(基础算法),里面包含9种指北针、4种箭头、3种旗帜、3种集结区的实现算法,通过这些算法计算出绘制该图形所需的所有的点序列,再通过Leaflet进行绘制,最终显示在客户端。

3. 军标绘制功能实现方法

上文介绍了基于Leaflet军标绘制扩展原理,下面将详细介绍军标绘制功能实现方法。
为了方便使用和管理代码,我们为插件添加了名为MilStd的命名空间,与该功能相关的所有扩展类型、控件都编写到MilStd命名空间下,存储在MilStdByLeaflet.js文件中。
(1)箭头、旗帜、指北针等算法实现。箭头、旗帜、指北针等算法实现主要涉及5个扩展类,分别为Milstd.commonFun类(基础算法)、Milstd.Arrow类(箭头算法)、Milstd.Compass类(指北针算法)、Milstd.Flag类(旗帜算法)、MilStd.Bezier类(集结区算法),这些类实现了19种军标类型。
• Milstd.commonFun类,实现各种贝赛尔曲线算法,涉及贝赛尔曲线中的简单图形算法,以及获取各种贝赛尔曲线的点信息等功能。这些方法作为内部方法,以供内部调用。Milstd.commonFun类的主要方法如表
在这里插入图片描述
Milstd.Arrow类,实现箭头算法,用户可以直接使用以下方法获取绘制箭头所需的点信息。Milstd.Arrow类的主要方法如表。

Milstd.Compass类,实现9种指北针算法,用户可以直接调用以下方法获取绘制9种指北针所需的点信息。在绘制这些指北针图形时,需要使用Milstd.MilstdMultyLine类中扩展的几何类型。Milstd.Compass类的主要方法如表。
在这里插入图片描述
何类型扩展工具(MilStd.MilStdGeomtry类)。军标绘制包括箭头、指北针、旗帜、集结区的4类图形,这4类图形的绘制由一系列坐标点数组,根据Leaflet中的画线或画区的方法绘制而成。关于这种复杂的几何结构,Leaflet并没有现成的几何元素,因此我们定义了几何类型扩展工具(MilStd.MilStdGeomtry类),MilStd.MilStdGeomtry类是在L.FeatureGroup类的基础上进行了继承扩展。
代码如下:
在这里插入图片描述
扩展绘图工具(MilStd.MilStdDrawTool类)。由于现有的Leaflet框架没有军标这样复杂的图形,更没有军标绘制工具,所以我们基于L.Evented类进行扩展,编写了扩展绘图工具(MilStd.MilStdDrawTool类),该工具可以实现军标的交互绘制,任意选择军标图形类型,单击地图开始绘制,拖曳鼠标指针进行交互绘图,双击即可结束绘制。其中,双箭头的绘制比较特殊,需要在地图上单击两次才能开始绘制。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/109448.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

百货店失去核心竞争力了吗?全靠超市即时零售撑起

近年来,传统百货不景气,不过,从今年上半年的情况看,似乎有些好转。 然而,实际情况并不如预期那么好,有专家认为:“百货上市公司业绩和去年相比增长是正常的。实际上,百货业态增长的…

【C++】常用集合算法

0.前言 1.set_intersection #include <iostream> using namespace std;// 常用集合算法 交集set_intersection #include<vector> #include<algorithm>void myPrint(int val) {cout << val << " "; }void test01() {vector<int>v…

Linux:LVS (NAT群集搭建)

模拟环境 外网入口服务器 外网 192.168.8.88 内网ip 192.168.254.4 web1 服务器 ip 192.168.254.1 网关&#xff1a; 192.168.254.4 web2 服务器 ip 192.168.254.2 网关&#xff1a; 192.168.254.4 共享存储服务器 ip 192.168.254.3 介绍 访问 外网192.16…

网络工程师的甩锅指南,果断收藏

大家好&#xff0c;我是老杨。 都说IT行业最容易被甩锅的就是网工&#xff0c;这是有科学依据的&#xff0c;比如&#xff1a; 纵观我网工群的群友聊天&#xff0c;“锅”不离口&#xff0c;很难不说明一点什么问题。 遇到甩锅&#xff0c;我相信没有哪位朋友的心情是愉悦的。…

华为云云耀云服务器L实例评测|部署功能强大的监控和可视化工具Grafana

应用场景 Grafana介绍 Grafana是一个功能强大的监控和可视化工具&#xff0c;适用于各种行业和应用场景&#xff0c;如IT运维监控、网络监控、能源管理、金融市场分析等。它提供了灵活的数据源支持、强大的可视化功能和告警机制&#xff0c;以及注释和过滤功能&#xff0c;使…

首家!亚信科技AntDB数据库完成中国信通院数据库迁移工具专项测试

近日&#xff0c;在中国信通院“可信数据库”数据库迁移工具专项测试中&#xff0c;湖南亚信安慧科技有限公司&#xff08;简称&#xff1a;亚信安慧科技&#xff09;数据库数据同步平台V2.1产品依据《数据库迁移工具能力要求》、结合亚信科技AntDB分布式关系型数据库产品&…

vscode中git的使用,以及与webstorm中git的使用对比

前言&#xff1a; 在项目中经常使用的git提交我们代码的时候&#xff0c;vscode和webstorm 是用的非常多的两个工具了&#xff0c;这里再次整理下他们的具体使用以及各自的优势&#xff01; 1、初始化拉取项目 个人习惯&#xff0c;这里就不说框架用法了&#xff0c;原始的最简…

Android EditText setTranslationY导致输入法覆盖问题

平台 RK3288 Android 8.1 显示: 1920x1080 160 dpi 概述 碰到一个问题&#xff1a; 弹出的输入法会覆盖文本输入框。 原因&#xff1a;输入框使用了setTranslationY() 位置偏移后&#xff0c; 输入法无法正确获取焦点的位置。 分析 先上图: 初始布局 调用etTranslation…

【LeetCode-中等题】707. 设计链表

文章目录 题目方法一&#xff1a;单向链表实现方法二&#xff1a; 题目 方法一&#xff1a;单向链表实现 新增或删除一个位置的节点找到这个位置的前一个节点即可 class MyLinkedList {int size;ListNode head;public MyLinkedList() {size 0;head new ListNode(0);}public…

HTML中name和class,id的区别和联系

在HTML中&#xff0c;name、class和id是用于标识和选择元素的属性。 区别&#xff1a; name属性&#xff1a;用于标识表单元素&#xff0c;特别是在提交表单时&#xff0c;用于识别表单数据。name属性可以在同一表单中的多个元素中重复使用。class属性&#xff1a;用于为一个…

电子凭证试点深化后,企业如何应对?百望云提供电子凭证一体化解决方案!

今年5月&#xff0c;财政部、税务总局、人民银行、国务院国资委、国家档案局、标准委、国电联办、民航局、国铁集团九单位组织召开电子凭证会计标准深化试点启动会。 电子会计凭证的格式非常多样化&#xff0c;电子会计凭证的处理一直是企业的难点。此次试点工作虽然对企业的财…

基于SSM+Vue的医院医患管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用Vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…