地图大量数据查询与渲染——bug及解决方案

本文记录大数据可视化项目中信息查询过程遇到的实际问题及解决方案，用到了Vue自定义组件、Promise.all、DocumentFragment、event loop等。

项目需求

项目使用的arcgis地图服务中主要地图要素为图斑即面状要素，需要根据图斑属性对图斑进行查询，获得符合要求的图斑并高亮显示。

问题及解决方案总结

问题1

属性查询多条件组合问题：简单易懂的多条件的输入

解决方案：自定义条件输入组件，分为图斑属性条件和所在区域条件，在此篇中不详细展开。

问题2

arcgis server查询数量上限问题：arcgis server限制查询地图服务获得数量的上限，项目中设置上限为2000，查询得到的结果不完整。

解决方案：采用objectID对要素进行分批查询，使用Promise.all处理多个查询。

问题3

数据渲染问题：仅一个区县的图斑数量达到近2w，前端渲染压力大，造成卡崩，chrome浏览器报错paused before potential out-of-memory crash。

解决方案：①首先使用requestAnimationFrame进行渲染，每次渲染50个，仍报错；②先将数据添加渲染到一个新建graphicLayer变量中，渲染完成后添加到map对象中，可行。（类似于documentFragment）

问题4

用户体验问题：渲染图层添加到map对象中需要一定时间（数据量为2w时超过10s），用户体验不佳。

解决方案：添加图层时地图上覆盖loading状态，图层添加完成后取消loading。①arcgis ap