GIS前端-图形样式编辑

随着科技和文化的不断发展，信息化早已覆盖和渗透到各行各业，无处不在的地理信息也在创造和传递着巨大价值。在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具有更好的视觉效果与交互效果展现，深受广大用户喜爱。