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类),该工具可以实现军标的交互绘制,任意选择军标图形类型,单击地图开始绘制,拖曳鼠标指针进行交互绘图,双击即可结束绘制。其中,双箭头的绘制比较特殊,需要在地图上单击两次才能开始绘制。

目录
相关文章
|
19天前
|
负载均衡 前端开发 JavaScript
前端研发链路之开发
本文首发于微信公众号“前端徐徐”,作者徐徐。文章介绍了前端研发链路中的开发部分,重点探讨了开发服务器(dev-server)、热更新(hot-reload)、数据模拟(mock)和代理(proxy)等关键技术,帮助开发者理解其基本原理和应用场景,提升开发效率和代码质量。
32 2
前端研发链路之开发
|
6天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
15天前
|
前端开发 JavaScript 开发者
构建工具对比:Webpack与Rollup的前端工程化实践
【10月更文挑战第11天】本文对比了前端构建工具Webpack和Rollup,探讨了它们在模块打包、资源配置、构建速度等方面的异同。通过具体示例,展示了两者的基本配置和使用方法,帮助开发者根据项目需求选择合适的工具。
13 3
|
14天前
|
人工智能 前端开发 测试技术
探索前端与 AI 的结合:如何用 GPT-4 助力开发效率
本文介绍了 GPT-4 如何成为前端开发者的“神队友”,让开发变得更加高效愉快。无论是需求到代码的自动生成、快速调试和性能优化,还是自动化测试和技术选型,GPT-4 都能提供极大的帮助。通过智能生成代码、捕捉 BUG、优化性能、自动化测试生成以及技术支持,GPT-4 成为开发者不可或缺的工具,帮助他们从繁重的手动任务中解脱出来,专注于创新和创意。GPT-4 正在彻底改变开发流程,让开发者从“辛苦码农”转变为“效率王者”。
25 0
探索前端与 AI 的结合:如何用 GPT-4 助力开发效率
|
18天前
|
设计模式 前端开发 JavaScript
前端编程的异步解决方案有哪些?
本文首发于微信公众号“前端徐徐”,介绍了异步编程的背景和几种常见方案,包括回调、事件监听、发布订阅、Promise、Generator、async/await和响应式编程。每种方案都有详细的例子和优缺点分析,帮助开发者根据具体需求选择最合适的异步编程方式。
28 1
|
20天前
|
存储 监控 前端开发
掌握微前端架构:构建可扩展的前端应用
【10月更文挑战第6天】随着前端应用复杂性的增加,传统单体架构已难以满足需求。微前端架构通过将应用拆分为独立模块,提升了灵活性与可维护性。本文介绍微前端的概念、优势及实施步骤,包括定义边界、创建共享UI库、设置通信机制等,并探讨其在SPA扩展、大型项目模块化及遗留系统现代化中的应用。通过实战技巧如版本控制、配置管理和监控日志,帮助团队高效协作,保持应用灵活性。微前端架构为构建大型前端应用提供有效解决方案,适合希望提升项目可扩展性的开发者参考。
|
24天前
|
前端开发 JavaScript 开发者
利用代码分割优化前端性能:高级技巧与实践
【10月更文挑战第2天】在现代Web开发中,代码分割是优化前端性能的关键技术,可显著减少页面加载时间。本文详细探讨了代码分割的基本原理及其实现方法,包括自动与手动分割、预加载与预取、动态导入及按需加载CSS等高级技巧,旨在帮助开发者提升Web应用性能,改善用户体验。
|
21天前
|
前端开发 JavaScript 开发者
深入解析前端开发中的模块化与组件化实践
【10月更文挑战第5天】深入解析前端开发中的模块化与组件化实践
21 1
|
24天前
|
前端开发 JavaScript 开发者
前端angularJs的开发过程
前端angularJs的开发过程
17 1
|
13天前
|
JavaScript 前端开发 Docker
拿下奇怪的前端报错(二):nvm不可用报错`GLIBC_2.27‘‘GLIBCXX_3.4.20‘not Found?+ 使用docker构建多个前端项目实践
本文介绍了在多版本Node.js环境中使用nvm进行版本管理和遇到的问题,以及通过Docker化构建流程来解决兼容性问题的方法。文中详细描述了构建Docker镜像、启动临时容器复制构建产物的具体步骤,有效解决了不同项目对Node.js版本的不同需求。