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

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

需求概述

随着遥感技术、全球定位系统、因特网和地理信息系统等现代信息技术之间的相互渗透,逐渐形成以地理信息系统为核心的集成化技术系统,并在资源调查、环境评估、区域发展规划、公共设施管理、交通安全、军事等领域得到了广泛应用。军标绘制与动态模拟是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类),该工具可以实现军标的交互绘制,任意选择军标图形类型,单击地图开始绘制,拖曳鼠标指针进行交互绘图,双击即可结束绘制。其中,双箭头的绘制比较特殊,需要在地图上单击两次才能开始绘制。

目录
相关文章
|
4天前
|
前端开发 UED 开发者
现代前端开发中的响应式设计原理与实践
本文探讨了现代前端开发中响应式设计的重要性及其实现原理。通过分析媒体查询、弹性网格布局以及视口单位等技术手段,揭示了如何通过这些工具实现页面在不同设备上的优雅适配。最后,结合实际案例展示了响应式设计在提升用户体验和网站性能方面的应用。
|
4天前
|
缓存 前端开发 UED
前端优化:首屏加载速度的实践
随着互联网技术的飞速发展,前端网页逐渐取代了传统客户端成为用户获取信息、进行交互的重要渠道,但是网页也有常见的弊端,比如网页首屏加载速度的快慢直接影响着用户体验,那么如何提升网页的首屏加载速度,成为了前端开发者必须面对的问题。本文将从多图片懒加载、避免用户多次点击请求以及骨架屏原理等方面,简单分享一下前端优化首屏加载速度的策略优化。欢迎大家在评论区留言交流。
16 2
前端优化:首屏加载速度的实践
|
11天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
2天前
|
运维 JavaScript 前端开发
前端 JS 经典:vue 开发中的 base 和 publicPath
前端 JS 经典:vue 开发中的 base 和 publicPath
10 1
|
8天前
|
JSON 前端开发 Java
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
22 6
|
4天前
|
前端开发 Java 微服务
Spring Boot与微前端架构的集成开发
Spring Boot与微前端架构的集成开发
|
8天前
|
前端开发 JavaScript 数据管理
引领潮流:React框架在前端开发中的革新与实践
React,始于2013年,由Facebook驱动,以其组件化、Virtual DOM、单向数据流和Hooks改革前端。组件化拆分UI,提升代码复用;Virtual DOM优化渲染性能;Hooks简化无类组件的状态管理。庞大的生态系统,包括Redux、React Router等库,支持各种需求。例如,`useState` Hook在计数器应用中实现状态更新,展示React的实用性。React现已成为现代Web开发的首选框架。【6月更文挑战第24天】
41 2
|
12天前
|
机器学习/深度学习 人工智能 前端开发
未来趋势下的前端开发:可视化编程的崛起
随着人工智能和机器学习技术的不断发展,前端开发领域也在逐渐迎来变革。本文探讨了未来趋势下前端开发的发展方向,重点介绍了可视化编程在前端开发中的应用和优势,以及对传统前端开发方式的影响。
|
16天前
|
前端开发 JavaScript 开发工具
Web前端开发学习资料:深度探索与开发实践
Web前端开发学习资料:深度探索与开发实践
19 3
|
2天前
|
资源调度 前端开发 JavaScript
如何用 Bower 管理前端资源:提升开发效率与项目维护性
【7月更文挑战第2天】**Bower**是基于Node.js的前端包管理器,用于高效管理JavaScript库、CSS和HTML模板等资源。通过安装、配置、搜索、安装、更新及卸载组件,它帮助开发者保持依赖的一致性,提升开发效率。配置`.bowerrc`设定安装目录,`bower.json`记录依赖。遵循最佳实践,如定期更新、锁定版本和清理无用组件,能增强项目维护性。尽管有新工具出现,掌握Bower仍是前端开发基础。
38 0