GIS前端—Popup标注视图

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应用。