GIS前端-地图标绘与动画

在GIS领域，电子地图发挥出了显著的作用，从衣、食、住、行各个方面影响着人们的日常生活，给人们带来极大的便利。从功能层面窥探GIS的图形绘制、地图标注、动画特效等客户端可视化功能：①图形绘制是最基础的客户端功能。一方面通过客户端图形绘制与地图交互，获得其他查询、分析等功能操作所需的空间几何；另一方面作为空间信息可视化的窗口，负责展现点、线、面等几何信息。②地图标注是电子地图的核心功能，与很多应用息息相关。例如，通过图片标注的形式，在地图上标识餐厅、医院、学校、银行等兴趣点；通过文字标注展示兴趣点的具体信息；通过Popup标注实现图文结合的展示效果等。③动画特效是一种形象逼真的展现方式，具有很广泛的应用场景。例如，一个快递从发货地运送到目的地，可以通过要素轨迹移动来实现；一个台风的影响范围，可以通过图形闪烁功能来表达等。
地图标绘与动画特效是WebGIS应用不可或缺的功能，丰富了地理信息客户端可视化功能，让WebGIS应用更多彩、更生动、更形象，增强用户体验。本章从图形绘制、地图标注、动画特效3部分着手，让读者感受这些功能在实际场景中的应用。此外，本章还重点讲述了基于Leaflet实现这些功能的一般方法、流程，每个功能都给出了核心实现代码，供用户参考。

图形绘制原理

形绘制功能，即在地图容器中绘制几何图形，包括点、线、圆、矩形与多边形等，既可以通过鼠标交互绘制，也可以直接添加进程序中绘制好的图形。

图形绘制是WebGIS非常重要的一部分，查询、编辑、分析等功能均涉及客户端的图形绘制。一般通过绘制图形来获取地图的空间范围，为查询、分析等功能提供几何条件限制及操作要素的空间范围等。

在Leaflet中，图形绘制的基类为L.Path，从该基类中派生出了多个子类，用于基本图形的绘制，包括L.Polyline、L.Polygon、L.Rectangle、L.Circle等。基于这些子类，调用相关的API接口，用户即可实现各种图形的绘制功能。Leaflet中的图形绘制类关系图如图

绘制图形时需要构造哪些参数，才能绘制出想要的图形？首先，构造该图形的坐标，只有设置了坐标，图形才能被绘制在指定位置；其次，设置图形的样式信息，如边线颜色、填充色、透明度、线条宽度、半径大小等。
下面以绘制线为例进行介绍，官网给出的接口为：

绘制几何图形

几何图形包括点、折线、圆、矩形、多边形等。本实例主要实现这些基本图形的绘制功能。无论当前地图是哪种参照系，在绘制图形时传入的坐标均为经纬度坐标，且一定要按照先纬度、后经度的格式组织。
本实例以天地图地图作为底图绘制几何图形，主要实现步骤如下。
（1）在中通过onload事件加载初始化函数，并创建一个div作为Map对象的容器。
（2）在初始化函数中，创建一个Map对象，设置显示中心、当前显示级数、参考坐标系等参数。
（3）通过L.TileLayer加载一幅天地图地图进行显示。
（4）在脚本函数drawGraphic()中实现几何图形的绘制功能，通过options设置所绘制的几何图形的参数，如边线颜色、透明度等。
代码如下：


在WebGIS应用中，交互绘制是一个核心功能，与许多应用相关联。比如，在地图上绘制一条线，显示实地距离；绘制一片多边形区域，得到实地面积；交互式单击拾取地物、拉框查询、交互编辑等，应用十分广泛。

交互绘制功能的核心显而易见，在于“交互”二字。Leaflet提供了很多交互事件供用户使用，如鼠标单击事件（mousedown）、鼠标移动事件（mousemove）、鼠标释放事件（mouseup）等。在事件的响应函数中可以动态获取坐标信息，如监听鼠标单击事件，当单击地图时，即可获取单击位置处的坐标；监听鼠标双击事件，当双击地图时，完成图形的绘制功能。

Leaflet提供了多个交互绘制及编辑的功能插件。本节以一个常用的交互编辑插件leaflet.draw.js为例，向读者介绍基于Leaflet进行交互绘制的功能及效果。

1. 修改图形坐标点
   Leaflet官网的插件库提供了图形交互绘制及编辑的插件（leaflet.draw.js插件下载地址为https://github.com/Leaflet/Leaflet.draw）。leaflet.draw.js插件封装了多种图形的绘制控件，如点、线、圆、矩形、多边形、标注等。在构造绘制对象时，以属性的形式加载这些控件。如果需要使用某个控件，则将该控件的属性值设置为true，反之设置为false。
   除了基本图形绘制控件，leaflet.draw.js插件还封装了图形的几何节点编辑控件、图形删除控件，供用户对绘制的图形进行编辑操作。本实例基于leaflet.draw.js插件编写，主要实现步骤如下。
   （1）在中通过onload事件加载初始化函数，并创建一个div作为地图容器。
   （2）在初始化函数中，创建一个Map对象，设置显示中心、当前显示级数、参考坐标系等参数。
   （3）通过L.TileLayer加载一幅天地图地图进行显示。
   （4）创建绘制控件L.Control.Draw，设置需添加的各种绘制控件。
   （5）监听绘制完成事件。
   代码如下：