主要看思路：区域数据去重 + JavaScript一次性展示几万条数据实例代码

近期做1功能，Gis地图 基于百度地图api , 会遇到的问题的，

如后台接口给的数据很多，大几千上万的，如果拿了数据直接渲染dom ，这滋味爽爽的。

再遇上 客户端浏览器悲催的，这卡顿就来了...

前端大量数据渲染的一个弊端。

 

想到的处理方式：

1. 数据的去重合并

基于当前可是屏幕范围，拿到baidu对应的 经维度区域，baidu api 里有 getBounds 和 getZoom 方法

var viewArea =  map.getBounds();  // 可视区域
var mapScale = map.getZoom();  // 地图放大缩小比例

对应后台接口返回数据，要拿基于这个可是区域的维度范围进行返回，

如果回来有万以上，在页面上展示这么多也没实际意义，

前端需要自己进行数据过滤，基于放大缩小比例， 屏幕上返回数据偏差不大的要进行去重  （这个算法就先不细说了）

最先想到的是 2组数据循环对比去重，怎么看都不太对啊，这要数据多了？？？ 不用想，绝对要挂的节奏....

-------------------------------

和架构师聊了，给了个建议，效率上好很多， 看下图：

给的思路：

1. 基于区域画格子，算出格子对应的经纬度，构造1个二维数组的数据；

2. 拿到后台返回的数据，循环时，算出在二位数组中对应的位置，如状态为无就认为该条数据有效，更改对应二位数组数据的状态， 如已经有状态了数量丢弃，对应的状态数量+1；

处理出有效的数据......扯的有点远了

 

2. 数据的分片渲染展示

如果有效数据还是很多，假如有大几千几万的，一次展示全也是苦哈哈的；

处理方式其实也不复杂， 把数据照一定数量进行分块，定时异步展示出；

如有6000条数据， 可照1000条拆成6组， 先拿1组展示，循环定时展示出其他....

思路基本上是这样

 

更多细节也可参考看到的一文章， 里面有个保持数据插入的次序不错，可作参考

JavaScript一次性展示几万条数据实例代码： http://www.php.cn/js-tutorial-360591.html