常用的基础功能通常是一个应用系统所必需的,如地图的缩放、导航、定位、弹出框等,它让一张静态的地图动起来,让地图承载更多的空间信息,并以友好的交互方式呈现给用户。例如,一个大众应用的旅游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各种参数的设置和实现,下面介绍自定义缩放控件的实例。
代码如下: