前端使用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中的图层控制器中可以对添加的图层进行可见性控制: