文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处: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/

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

                                                                                                                          

以项目谈WebGIS中Web制图的设计和实现的更多相关文章

  1. (八)WebGIS中栅格图层的设计

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.    前言 我们在上一章里了解到WebGIS中栅格图层的本质—— ...

  2. (十五)WebGIS中平移功能的设计和实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 这一章我们将详细讲解WebGIS工具栏中另一个基础工具——平 ...

  3. (十二) WebGIS中矢量图层的设计

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在前几章中我们已经了解了什么是矢量查询.屏幕坐标与地理坐标之 ...

  4. 从底层开发谈WebGIS中实现地理长度固定的可视窗口的思路和方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.具体问题 在公司某边界城市的项目中,对方提出因为自己的地图安全度要 ...

  5. IOS中 浅谈iOS中MVVM的架构设计与团队协作

    今天写这篇文章是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇文章的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦 ...

  6. 浅谈iOS中MVVM的架构设计与团队协作【转载】

    今天写这篇文章是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇文章的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦 ...

  7. 浅谈iOS中MVVM的架构设计与团队协作

    说到架构设计和团队协作,这个对App的开发还是比较重要的.即使作为一个专业的搬砖者,前提是你这砖搬完放在哪?不只是Code有框架,其他的东西都是有框架的,比如桥梁等等神马的~在这儿就不往外扯了.一个好 ...

  8. (十四)WebGIS中地图放大缩小的设计和实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在上一章中,我们给出了整个工具栏设计的核心,使用命令模式,并 ...

  9. 浅谈面试中的OOD面向对象设计问题

    转载自:http://baozitraining.org/blog/Object-oriented-design-question/ OO设计问题是电面或者onsite中常考的问题,尤其对以Java为 ...

随机推荐

  1. SQLSERVER将一个文件组的数据移动到另一个文件组

    SQLSERVER将一个文件组的数据移动到另一个文件组 有经验的大侠可以直接忽视这篇文章~ 这个问题有经验的人都知道怎麽做,因为我们公司的数据量不大没有这个需求,也不知道怎麽做实验 今天求助了QQ群里 ...

  2. MIP改造常见问题二十问

    在MIP推出后,我们收到了很多站长的疑问和顾虑.我们将所有疑问和顾虑归纳为以下二十个问题,希望对大家理解 MIP 有帮助. 1.MIP 化后对其他搜索引擎抓取收录以及 SEO 的影响如何? 答:在原页 ...

  3. iPhone Anywehre虚拟定位提示“后台服务未启动,请重新安装应用后使用”的解决方法

    问题描述: iPhone越狱了,之后在Cydia中安装Anywhere虚拟定位,但是打开app提示:后台服务未启动,请重新安装应用后使用. 程序无法正常使用... 解决方法: 打开Cydia-已安装, ...

  4. 几个比较”有意思“的JS脚本

    1.获取内网和公网真实IP地址(引用地址) <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  5. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  6. JavaScript权威指南 - 数组

    JavaScript数组是一种特殊类型的对象. JavaScript数组元素可以为任意类型,最大容纳232-1个元素. JavaScript数组是动态的,有新元素添加时,自动更新length属性. J ...

  7. 【开源毕设】一款精美的家校互动APP分享——爱吖校推 [你关注的,我们才推](持续开源更新3)附高效动态压缩Bitmap

    一.写在前面 爱吖校推如同它的名字一样,是一款校园类信息推送交流平台,这么多的家校互动类软件,你选择了我,这是我的幸运.从第一次在博客园上写博客到现在,我一次一次地提高博文的质量和代码的可读性,都是为 ...

  8. WebApi返回Json格式字符串

    WebApi返回json格式字符串, 在网上能找到好几种方法, 其中有三种普遍的方法, 但是感觉都不怎么好. 先贴一下, 网上给的常用方法吧. 方法一:(改配置法) 找到Global.asax文件,在 ...

  9. IdentityServer4 使用OpenID Connect添加用户身份验证

    使用IdentityServer4 实现OpenID Connect服务端,添加用户身份验证.客户端调用,实现授权. IdentityServer4 目前已更新至1.0 版,在之前的文章中有所介绍.I ...

  10. 集合(set)-Python3

    set 的 remove() 和 discard()  方法介绍. 函数/方法名   等价操作符 说明 所有集合类型 len(s)   集合基数:集合s中元素个数 set([obj])   可变集合工 ...