以项目谈WebGIS中Web制图的设计和实现

简介: 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/1.背景介绍一般WebGIS项目中,前端展示数据的流程基本是先做数据入库、服务发布、然后前端调用展示。

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

1.背景介绍

一般WebGIS项目中,前端展示数据的流程基本是先做数据入库、服务发布、然后前端调用展示。假设用户没有基本的GIS背景,需要将本地的excel或CSV等文件快速在地图上进行展示,此需求该如何解决?

目前市场上针对解决这种需求的产品已陆续出现,比如mapbox的studio,esri的portal,超图的地图慧以及由超图原项目经理离职后创办的地图无忧等产品。这类产品一般都以云服务的概念来包装,提供本地文件的Web制图,相关空间分析,数据的编辑,共享等。这里,我以公司某项目来谈谈个人对此类需求的设计和实现。

2.产品设计

研究市场上成熟的产品会发现二八定律是广泛存在的,比如esri的portal中提供了大量的空间分析功能,但是这些功能能够被用户使用上的概率非常低,仅限于卖产品时客户经理的技能秀状态。抽出普适的功能,定位使用的用户,结合公司的需求,是我最开始设计时的原则。

这里首先定义用户:公司研发(目标-数据整合、快速开发),工程同事(某些需求可独立解决),用户使用(解决用户简单需求)。

根据以上三个原则,提出了这样的产品功能构想:

a.本地文件快速展示(研发、工程、客户)。

b.本地文件制图(研发、工程、客户)。

c.基本空间分析(研发、工程、客户)。

d.数据编辑(研发、工程、客户)。

e.数据共享

针对研发:提供数据层面对接、服务层面对接、前端接口对接。

针对工程:提供服务发布功能。

针对客户:提供前端对分享数据的查看。

f.数据权限

针对工程、客户:可配置数据查看权限。

 

3.产品架构设计

以模块化为核心,首先将地图操作和制图业务进行分裂,构建出两个大模块:

 

在portal中对各功能模块是否能添加进行配置管理:

 

4.本地数据展示的设计和实现

本地数据展示主要针对本地的CSV和本地Excel数据,数据中需要包含坐标字段(X、Y),通过portal添加至地图上进行快速展示:

 

5.Web制图的设计和实现

5.1简单渲染

简单渲染是指用户可以选择渲染的填充色、填充透明度、边框色、边框透明度、以及选择是否用图标(图标可上传选择)展示:

 

5.2分类渲染

分类渲染是指用户可以选中分类的字段,然后对字段对应的不同阈值进行不同渲染展示:

 

6.空间分析的设计和实现

6.1多维分析

多维分析中提供热区展现、聚类分析两种维度,并且各参数可以选择控制:

 

6.2缓冲分析

提供针对上传数据的点、线、面的缓冲分析功能:

 

7.数据管理

7.1数据关键字查询

选中查询字段,输入查询关键字后便可以搜索出数据中符合要求的结果,点击结果面板后可以在地图上定位到该要素: 

 

7.2数据编辑

针对数据提供增加、修改、删除、另存功能,其中另存功能能将修改后的数据导出成本地的CSV文件:

 

8.数据共享

8.1设计

选择用PostGIS来存储上传数据,主要考虑都后期可以使用geoserver直接将上传的数据当做图层进行发布。然后设计了三张表来进行数据的元数据管理,分别是tc_user_upload_data,tc_user_upload_data_field,tc_user_upload_data_style表,这三张表中,第一个是存储上传的数据对应的数据表、样式表、上传人员,第二张表对应的各数据所拥有的字段,第三张表存储的是数据对应的样式文件。最后,每上传一个数据,除了填充这三张元数据表外,还为该数据生成一个数据存储表,表中包含geom字段以ST_Geometry格式来存储,为以后和地理服务器对接。

8.2实现

点击上传按钮,即将数据上传至PG库中:

 

8.3geoserver发布

利用geoserver发布:

 

或者利用公司集成了发布工具的UDIG配图发布:

 

Geoserver中预览:

 

9.权限配置

配置各岗位对服务图层的权限:

 

图层树中对图层浏览:

 

10.扩展设计

a.增加前端以配置样式读取上传数据的接口,为研发前端调用。

b.针对研发特殊需求,提供数据层面对接方案。

c.增加更多扩展GIS功能,比如路径纠正、等值线、热点图等。

d.扩展支持更多的本地文件格式。

e.增加地图底图样式可切换配置界面。将地图底图更换成矢量切图,对矢量切图以YAML格式进行样式配置。

 

 

                                -----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

                                                                           如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^

                                                                                                                          

 

目录
相关文章
|
2月前
|
缓存 JSON 监控
如何在项目中保证 Web 组件化的性能
保证 Web 组件化的性能需要从多个方面入手,综合运用各种优化方法和策略。通过持续的优化和改进,能够提高组件化的整体性能,为用户提供更好的体验,同时也有助于提高项目的开发效率和质量。
45 8
|
2月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
36 7
|
2月前
|
监控 安全 测试技术
如何在实际项目中应用Python Web开发的安全测试知识?
如何在实际项目中应用Python Web开发的安全测试知识?
35 4
|
2月前
|
中间件 Go API
Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架
本文概述了Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架。
125 1
|
2月前
|
JavaScript 前端开发 开发工具
web项目规范配置(husky、eslint、lint-staged、commit)
通过上述配置,可以确保在Web项目开发过程中自动进行代码质量检查和规范化提交。Husky、ESLint、lint-staged和Commitlint共同作用,使得每次提交代码之前都会自动检查代码风格和语法问题,防止不符合规范的代码进入代码库。这不仅提高了代码质量,还保证了团队协作中的一致性。希望这些配置指南能帮助你建立高效的开发流程。
53 5
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
Web开发者必看:手把手教你如何轻松播放m3u8流地址,解锁视频播放新技能,让你的项目更上一层楼!
【10月更文挑战第23天】随着互联网技术的发展,m3u8格式因良好的兼容性和高压缩率被广泛用于网络流媒体传输。本文介绍如何在Web端播放m3u8流地址,包括引入视频播放器(如Video.js)、创建播放器容器、初始化播放器及播放m3u8流的具体步骤。此外,还涉及处理加密m3u8流的示例。
396 1
|
3月前
|
JSON 搜索推荐 API
Python的web框架有哪些?小项目比较推荐哪个?
【10月更文挑战第15天】Python的web框架有哪些?小项目比较推荐哪个?
81 1
|
3月前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
在Web开发领域,AJAX与Fetch API是提升交互体验的关键技术。AJAX(Asynchronous JavaScript and XML)作为异步通信的先驱,通过XMLHttpRequest对象实现了局部页面更新,提升了应用流畅度。Fetch API则以更现代、简洁的方式处理HTTP请求,基于Promises提供了丰富的功能。当与Python Web框架(如Django、Flask)结合时,这两者能显著增强应用的响应速度和用户体验,使项目更加高效、高大上。
58 2
|
4月前
|
前端开发 Python
前后端分离的进化:Python Web项目中的WebSocket实时通信解决方案
在现代Web开发领域,前后端分离已成为一种主流架构模式,它促进了开发效率、提升了应用的可维护性和可扩展性。随着实时数据交互需求的日益增长,WebSocket作为一种在单个长连接上进行全双工通讯的协议,成为了实现前后端实时通信的理想选择。在Python Web项目中,结合Flask框架与Flask-SocketIO库,我们可以轻松实现WebSocket的实时通信功能。
79 2
|
3月前
|
监控 Java Maven
springboot学习二:springboot 初创建 web 项目、修改banner、热部署插件、切换运行环境、springboot参数配置,打包项目并测试成功
这篇文章介绍了如何快速创建Spring Boot项目,包括项目的初始化、结构、打包部署、修改启动Banner、热部署、环境切换和参数配置等基础操作。
170 0