随着科技和文化的不断发展,信息化早已覆盖和渗透到各行各业,无处不在的地理信息也在创造和传递着巨大价值。在GIS领域,电子地图发挥出了显著的作用,从衣、食、住、行各个方面影响着人们的日常生活,给人们带来极大的便利。从功能层面窥探GIS的图形绘制、地图标注、动画特效等客户端可视化功能
绘制的图形都有其对应的图形样式,如点半径、线条宽度、边线颜色、填充色、透明度等。在绘制图形时,如果没有自定义设置图形的样式,则会使用默认的样式进行绘制。在实际项目应用中,要结合具体业务需求设置图形的样式,以丰富图形表现形式,满足应用需求。
Leaflet封装了setStyle接口,让用户可以灵活地修改已绘图形的样式。本实例以天地图地图作为底图,添加两个图形样式编辑按钮,当单击编辑按钮时动态修改已绘图形的颜色样式,
主要实现步骤
如下。
(1)在中通过onload事件加载初始化函数,并创建一个div作为地图容器。
(2)添加两个标签,设置value值并绑定onclick事件,分别用于修改线的样式和矩形的样式。
(3)通过L.TileLayer加载一幅天地图地图进行显示。
(4)通过L.FeatureGroup创建一个图层组,分别创建一条线和一个矩形并添加至图层组中。
(5)在脚本函数setLineStyle()和setPolygonStyle()中实现图形样式编辑功能,通过setStyle()方法修改图形的参数。
代码如下:
获取图形几何信息
解析参数获取图形相关的几何信息,并在前端界面进行展示。
本实例以天地图地图作为底图,在交互式绘制图形后,将图形的几何信息展示到面板中,主要实现步骤如下。
(1)在中通过onload事件加载初始化函数,并创建一个div作为地图容器。
(2)添加一个div用于显示获取的图形几何信息。
(3)通过L.TileLayer加载一幅天地图地图进行显示,引入leaflet.draw.js脚本库,添加图形绘制控件。
(4)监听图形绘制完成事件,解析返回的参数,将获取的图形几何信息显示在面板中。
代码如下:
Leaflet插件库
中的L.Path.Transform插件实现了图形的旋转、拖曳、比例缩放等功能。L.Path.Transform插件的实现过程繁杂,由于篇幅原因我们不再详细介绍该插件的具体实现方法,只向读者展示该插件的使用方法及效果。如果读者感兴趣,则可以在Leaflet官网下载该插件源码进行学习和参考(L.Path.Transform插件下载地址为https://github.com/w8r/Leaflet.Path.Transform)。引入bundle.js脚本库并设置页面元素后,即可调用L.Path.Transform插件实现功能。
代码如下:
WebGIS(网络地理信息系统)是指基于互联网平台,客户端应用软件采用网络协议,运行在互联网上的地理信息系统,即将GIS所能提供的功能通过互联网提供给用户。顾名思义,WebGIS就是展现于网络上的GIS,是GIS与Web相融合的产物。通过Web的扩展,GIS冲破专业领域,真正成为大众化的GIS。地理信息普惠大众,越来越多的人正在使用地理信息服务,享受地理信息所带来的便利与乐趣。
随着技术的不断发展,GIS经历了单机环境应用向网络环境应用发展的过程。从21世纪开始,互联网进入了爆发式的增长阶段,网络的铺设与网速的提升为WebGIS的发展提供了坚实的大环境。GIS的应用从C/S(Client/Server,客户端/服务器)架构向互联网环境下的B/S(Browser/Server,浏览器/服务器)架构发展,B/S架构已成为GIS应用的主流。相比C/S架构,B/S架构的WebGIS具有部署方便、使用简单、便于推广等优势,为地理信息服务的发展奠定了基础。基于B/S架构的GIS系统越来越多地开始提供服务,并且随着RIA(富客户端)技术、Ajax(动态网页)技术等的涌现和成熟,WebGIS具有更好的视觉效果与交互效果展现,深受广大用户喜爱。