leaflet+postgres最终版(附源码下载)

前端使用Jquery和leaflet渲染地图、ajax发送服务请求,后端使用express框架响应请求,通过postgres客户端实现对postgres空间数据库的增删查改,且可按需请求geoserver和supermap iServer地图服务器数据,主要实现功能:(源代码下载链接在评论区):

1.数据可视化交互效果

2.使用 jscolor.js 库修改地图样式

3.几何图形的绘制与编辑

4.使用 turf.js 库绘制缓冲区

5.地图要素的增删查改操作

6.使用虚拟dom 和请求动画帧加载海量数据属性

 相比于之前的webgis系统变化有几点:

1.数据加载源有3个,分布是supermap iServer,Geoserver地图服务器,PG数据库, 

并且 PG数据库和supermap iServer的数据加载都可以使用SQL语句进行有条件的加载,如下图所示:

2.这次地图展示的的数据源是可以直接对加载PG数据库的数据进行CURD操作(创建(Create)、更新(Update)、读取(Read)和删除(Delete))的;

这是查看属性表信息结果图:

该数据表在加载海量数据时会不断渲染table表格里面的td标签,会导致浏览器卡顿,为此我参考了网上一些优化前端页面渲染的方法,采取使用虚拟DOM节点和请求动画帧的方法加快渲染刷新速度。创建一个虚拟Dom节点 插入真实文档之前不会触发dom渲染、回流等操作 因此能够很大程度减少dom操作所带来的的性能损耗。window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。回调函数执行次数通常是每秒60次,但在大多数遵循W3C建议的浏览器中,回调函数执行次数通常与浏览器屏幕刷新次数相匹配。 能够把每次dom的操作汇总在下一次重绘之前更新动画帧因此在浏览器单线程的机制下,能够无卡顿的加载,百万级列表。

3.对功能进行了比较细致的划分,可以增加开发人员的可读性,及时找到问题代码,提高开发效率。

 4.添加了蒙版(原理时对遮罩层的显示和隐藏操作),弹出的div退出前不可点击其他位置;

5.添加了日志记录,可以记录当前页面的事件顺序事件;

 6.在leaflet中的图层控制器中可以对添加的图层进行可见性控制:

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Leaflet是一个基于Web的交互式地图库,Geoserver是一个开源的地理空间数据服务器,PostGIS是一个基于PostgreSQL的地理空间数据库扩展。 在使用Leaflet、Geoserver和PostGIS来构建Web GIS应用程序时,通常的工作流程如下: 1. 准备地理空间数据并将其加载到PostGIS数据库中。 2. 配置Geoserver以访问PostGIS数据库,并将数据发布为Web服务。 3. 在Leaflet中编写JavaScript代码,以访问Geoserver中发布的Web服务,并在Web页面上呈现地图。 具体步骤如下: 1. 准备地理空间数据并将其加载到PostGIS数据库中。 首先,需要安装PostgreSQLPostGIS扩展。然后,在PostgreSQL数据库中创建一个新的数据库,并在该数据库中启用PostGIS扩展。接下来,使用QGIS等GIS软件来创建或导入地理空间数据,并将其保存为PostGIS支持的格式(例如Shapefile)。最后,使用PostgreSQL客户端工具(例如pgAdmin)将地理空间数据加载到PostGIS数据库中。 2. 配置Geoserver以访问PostGIS数据库,并将数据发布为Web服务。 打开Geoserver的Web界面,在数据存储中添加新的PostGIS数据库,并配置数据库连接参数。然后,在Geoserver中创建工作区和数据图层,并将其发布为Web服务。在此过程中,可以选择不同的发布格式(例如WMS、WFS等)和地图样式(例如SLD文件)。 3. 在Leaflet中编写JavaScript代码,以访问Geoserver中发布的Web服务,并在Web页面上呈现地图。 在HTML页面中引入Leaflet库和Leaflet插件(例如Leaflet.markercluster)。然后,在JavaScript代码中编写Leaflet地图对象,并使用Ajax请求访问Geoserver中发布的Web服务。最后,将地图对象添加到HTML页面中,以呈现交互式地图。 总之,Leaflet、Geoserver和PostGIS可以一起使用来构建功能强大的Web GIS应用程序,可以实现从数据管理到地图呈现的全流程。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不要随地大便

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值