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


目录
相关文章
|
4月前
|
前端开发 JavaScript API
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
65 1
|
3月前
|
Web App开发 JavaScript 前端开发
网页VUE纯前端在线预览编辑Office,支持doc/docx、xls/xlsx、ppt/pptx、pdf等格式
随着互联网技术的不断发展,越来越多的企业开始采用在线办公模式,微软Office Word 是最好用的文档编辑工具,然而doc、docx、xls、xlsx、ppt、pptx等格式的Office文档是无法直接在浏览器中直接打开的,如果可以实现Web在线预览编辑OffIce,肯定会还带来了更高效、便捷的办公体验,为我们的工作带来了更多可能性。
558 0
|
1月前
|
Web App开发 JavaScript 前端开发
2024年纯前端VUE在线编辑微软Office/金山WPS的Word/Excel文档
现在,随着数字化进程渗透到到各行各业,数据安全已经成为了数字化革命中的重要组成部分,而在线Office成在OA、ERP、文档系统中得到了广泛的应用,为我国的信息化事业也做出了巨大贡献。随着操作系统、浏览器及Office软件的不断升级和更新换代,加上国家对信息化、数字化系统要求的不断提升,一些厂家的WebOffice控件产品不断被淘汰出局,而现存的几个产品也存在以下几个问题:
425 1
2024年纯前端VUE在线编辑微软Office/金山WPS的Word/Excel文档
|
3月前
|
前端开发
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
70 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十八天-推荐歌单的结构和样式实现1
前端学习笔记202306学习笔记第四十八天-推荐歌单的结构和样式实现1
28 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十九天-Socket.io文本编辑实时共享之socket发送文本状态2
前端学习笔记202305学习笔记第二十九天-Socket.io文本编辑实时共享之socket发送文本状态2
31 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置
41 0
|
8月前
|
前端开发 Android开发
前端项目实战壹-安卓4.4/6.0无法安装非原生项目无法渲染样式
前端项目实战壹-安卓4.4/6.0无法安装非原生项目无法渲染样式
47 0
|
5月前
|
前端开发 程序员
前端反卷计划-组件库-03-组件样式
前端反卷计划-组件库-03-组件样式
|
6月前
|
前端开发 JavaScript
前端基础 -JQuery之 对样式的操作
前端基础 -JQuery之 对样式的操作
22 1