GIS前端-地图操作与交互

常用的基础功能通常是一个应用系统所必需的，如地图的缩放、导航、定位、弹出框等，它让一张静态的地图动起来，让地图承载更多的空间信息，并以友好的交互方式呈现给用户。例如，一个大众应用的旅游GIS系统，如果仅仅在Web端显示一张地图，那么这时只能看到一张静止的图片，用户无法提取更多的有用信息，没有太大的实用价值。如果在此基础上实现地图缩放控制、提供常用的测量等工具，并基于地图提供交通、饮食、住宿等一系列旅行信息的定位功能，同时实现兴趣点标注、导出图片等交互功能，才能使该旅游GIS系统富有生命力，能够为用户提供更多、更友好的地图服务。

地图操作与交互基本原理

在地图上的一切操作均要采用地图事件机制来实现，即通过鼠标的交互，使用地图相关事件触发回调函数，调用功能接口函数实现具体GIS功能。Leaflet作为新兴的前端开发框架，虽然设计简单，但拥有丰富的地图事件。Leaflet开发库的核心部分是在页面中创建地图并操纵地图，其框架如图

Leaflet提供的事件

包括浏览器事件和自定义的地图事件，主要由Handler类实现。浏览器事件为常用的鼠标事件，绑定到相应的DOM节点；地图事件即addLayer、addControl等，与Layer、Map等与地图相关的对象关联。在实现地图操作及地图相关功能时（如地图缩放操作与绘图、查询等WebGIS功能），通常需要添加事件监听，在事件处理方法中执行相关的功能函数。

在WebGIS二次开发中，涉及地图事件应用时，逻辑坐标与窗口坐标的转换也是一个非常关键的步骤。逻辑坐标是指地理坐标，表示真实的地理空间位置；窗口坐标是指网页中地图逻辑坐标对应的屏幕坐标，它是根据网页中地图容器布局（大小与位置），将地图逻辑坐标转换得到的。

例如，一个常见的矩形查询，需要使用鼠标在地图上绘制一个矩形，查询矩形范围内的空间要素。在实现矩形查询功能时，首先设置鼠标操作状态为矩形绘制状态；然后添加一个地图事件的监听，即添加矩形绘制鼠标弹起的事件监听，在监听事件的处理函数中获取绘制矩形的窗口坐标，将其转换为地图逻辑坐标；最后把得到的地图逻辑坐标范围作为查询条件，查询矩形范围内的空间要素。

缩放控件

放控件的主要功能是实现地图的放大和缩小操作，单击缩放控件上的加号按钮实现放大操作，单击缩放控件上的减号按钮实现缩小操作。Leaflet开发库提供的缩放控件为L.Control.Zoom，基于Leaflet开发库调用地图，地图左上角会默认显示一个缩放控件。如果想要隐藏缩放控件，则在Map容器中增加属性设置zoomControl: false即可。
本实例在天地图地图的基础上，加载Leaflet开发库中的缩放控件，主要实现步骤如下。
（1）新建一个HTML页面，加载一幅天地图地图作为底图。
（2）在加载地图的init()函数中，初始化zoomControl控件，并通过Map的addControl()方法将其加载到地图容器中。
代码如下：

本实例介绍的缩放控件是Leaflet封装好的功能，我们可以直接调用。但是在应用和开发时，有时需要根据实际情况对功能进行调整，那么如何实现自定义的缩放控件呢？根据对Leaflet脚本库的学习，我们发现缩放控件的实现就是对L.Control.Zoom各种参数的设置和实现，下面介绍自定义缩放控件的实例。
代码如下：