GIS前端-图形样式编辑

简介: 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具有更好的视觉效果与交互效果展现,深受广大用户喜爱。


目录
相关文章
|
8月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
1068 2
|
8月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
298 1
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
556 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
3110 9
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
1924 1
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
540 11
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
944 1
|
开发框架 JSON 缓存
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理

热门文章

最新文章