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