Popup标注视图
即根据需求实现个性化的弹框标注视图。Leaflet提供了L.Popup对象,用于添加Popup标注视图,通过setLatLng()方法设置Popup标注视图的位置,通过setContent()方法设置Popup标注视图的内容。
Popup标注视图的内容丰富多样,可以是一段文字、一张图片或图文结合。此外,Popup标注视图常结合图片标注一起使用。例如,在某地添加一个图片标注,当单击该图片标注时,弹出Popup视图,显示其信息。
本实例以天地图地图作为底图,在地图上添加一个图片标注,并关联一个Popup标注视图,显示地物的图文介绍,效果如图
主要实现步骤如下。
(1)在中通过onload事件加载初始化函数,并创建一个div作为地图容器。
(2)在初始化函数中,创建一个Map对象,设置显示中心、当前显示级数等参数。
(3)通过L.TileLayer加载一幅天地图地图进行显示。
(4)调用L.Marker添加一个图片标注。
(5)监听图片标注的单击事件,当单击图片标注时弹出一个Popup标注视图进行显示。
代码如下。
聚合标注
聚合标注也是WebGIS应用中的一个常用功能。在不同缩放级别的地图上,标注显示效果是不一样的。当显示级别比较低时,某些位置集中的多个标注可能无法在地图上直接显示出来。针对这种情形,可以利用聚合标注功能,将某一点附近的多个标注聚合显示。即将这些标注集中用一个聚合标注显示,聚合标注上显示该位置所聚合的标注个数。当放大地图时,标注会逐步展现出来;当缩小地图时,标注会不断聚合。
本实例以天地图地图作为底图,利用Leaflet插件库中的leaflet.markercluster-src.js插件(插件下载地址为https://github.com/Leaflet/Leaflet.markercluster)添加聚合标注,主要实现步骤如下。
(1)在中通过onload事件加载初始化函数,并创建一个div作为地图容器。
(2)在初始化函数中,创建一个Map对象,设置显示中心、当前显示级数等参数。
(3)通过L.TileLayer加载一幅天地图地图进行显示。
(4)调用插件封装的L.MarkerClusterGroup对象,添加聚合标注进行显示。
代码如下:
WebGIS框架结构与其他Web项目的框架结构在本质上并没有多少区别,唯一不同的是WebGIS可以提供一些地图方面的服务,即GIS服务资源。WebGIS框架结构如图1-7所示。WebGIS框架结构的底层为数据层,提供空间数据与业务数据等基础数据支撑;中间层一般包括提供基础GIS服务资源的GIS服务器,以及负责业务逻辑处理的业务逻辑服务器,其中GIS服务器既可以是专业的GIS开发平台或开源GIS项目,也可以是简单的大众应用地图服务器;顶层为客户端,用户可以使用各类WebGIS的API进行应用的开发,与GIS服务器或业务逻辑服务器交互,实现满足具体需求的WebGIS应用。