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


目录
相关文章
|
9天前
|
存储 前端开发 搜索推荐
(前端直接编辑CAD)网页CAD二次开发中线型表的使用方法
在DWG数据库中,线型样式存储在线型样式表 `McDbLinetypeTable` 中,每个线型表记录对象 `McDbLinetypeTableRecord` 对应一种线型样式。本文介绍了如何获取、添加、遍历、删除和修改线型样式,并提供了绘制不同线型的示例代码,包括虚线、点划线和带文字的线型。通过在线示例demo,用户可以实践修改CAD图纸中的实体线型及其样式。
|
1月前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
290 8
|
1月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
157 1
|
2月前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
2月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
85 1
|
2月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
55 11
|
6月前
|
开发框架 前端开发 数据安全/隐私保护
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
【4月更文挑战第30天】本文探讨了Flutter的布局和样式设计,关键点包括:1) 布局基础如Column、Row和Stack用于创建复杂结构;2) Container、Center和Expanded等常用组件的作用;3) Theme和Decoration实现全局样式和组件装饰;4) 实战应用如登录界面和列表页面的构建;5) 响应式布局利用MediaQuery和弹性组件适应不同屏幕;6) 性能优化,避免过度复杂设计。了解并掌握这些,有助于开发者创建高效美观的Flutter应用。
188 0
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
|
3月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
55 0
|
3月前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅:从styled-components到emotion,全面解析样式管理新趋势的实战应用与优势剖析!
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式,近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript,实现了样式与逻辑的高度耦合,提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例,探讨 CSS-in-JS 在 React 开发中的应用,并分享实践心得。首先介绍了 CSS-in-JS 的基本概念,然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
153 0
|
3月前
|
开发框架 JSON 缓存
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理