写过地图需求的同学应该都遇到过地图加载大量点(4W多个点)导致页面十分卡顿的问题吧。
最近项目上线验收，现场直接卡崩溃了，其实在公司还好，因为公司的电脑配置还算可以，没有出现过崩溃的现象(但是也很卡，本来也想偷下懒)。崩溃了怎么办啊(我感觉我更崩溃呢，天天加班赶需求哪有时间做优化的啊)。
原因：用户想要加载所有的点还不做聚合，而且每个点都要做动态扩散效果，还要实时刷新地图数据。
哎，先说我的解决方案吧。
- 取消点的动态扩散效果
- 图层层级显示图标点才会更新
- 只显示可视范围内的点
- 用户操作过程中不更新图层
第一点，我必须拿着我的数据让产品经理去给客户说有动效内存占用在600M到1200M跳动，动效是1s一个循环。那么每次执行动效就会让内存飚到1200M，然后接下来浏览器会回收之前渲染的内存，内存又降至600M。我就说这个实在没法优化只能去掉(我没有试加载动态图片会不会好点，但想来也差不多)。
第二点，我先说明图层的加载方案，当图层层级小于14时就加载全部点否则加载聚合点(what fuck)。客户就是这么牛，一般不应该是反着来吗。。那必须滴，这么多点客户也看不出点的位置更新，看到了也不知道是那个更新了。所以，出于性能考虑给出的方案是：当图层层级小于14的时候就不更新点。那么多点一起更新
第三点，前端是首次加载的时候把所有的数据都缓存起来的，由服务端推送更新消息，前端收到消息就维护缓存的数据并做相应的更新逻辑(在线离线/GIS等)，会维护一个更新队列，如果数据太大的时候就分次更新。好的，说了那么多废话是不是想水文啊
首先，每次更新(用户缩放和拖拽地图与推送)之前需要先拿到当前地图的四个角经纬度，然后调用Turf.js库提供的# pointsWithinPolygon方法：
const searchWithin = Turf.multiPolygon([[东],[南],[西],[北]]);
const ptsWithin = Turf.pointsWithinPolygon(Turf.points([...points]), searchWithin);
拿到当前可视范围内的点，再将可视范围内的点渲染到地图上。
第四点，当我开开心心把代码提交上去后，过了一会，我的前端同事给我说感觉页面还是很卡啊(0.0)。我表示不信，然后实际操作了一下，虽然上面的减少点的操作和减少点的数量让浏览器内存占用降了下来页面也确实不卡了，但是当我去拖动地图的时候发现问题了，怎么感觉拖着拖着的地图有规律的卡。怎么回事呢，再梳理下我明白了，之前的地图刷新时间是10s由于客户觉得刷新太慢了，索性就改成了3s，这一改一个不吱声，3s那不是很大概率当用户正在操作地图的时候地图重新渲染了所以感觉卡。知道问题就好办，判断用户当前是否在操作地图，movestart事件时表示用户开始操作地图，moveend事件表示用户结束操作。那就等用户操作地图结束后再更新地图，上手感受了一下一点也不卡了，搞定。
创作不易求，如果你看到这里还请您点赞收藏