地图展示大量数据解决方案
方案一、采用瓦片图片加载 放到一定级别在进行处理(如图所示)
地图上面可以看到很多密密麻麻的点、但整体操地图作却感觉不到卡,这就很奇怪了、第一猜想是基于canvas实现的海量点,接着就是 f12 -> elements -> ctrl+f -> '<canvas' ....居然一个匹配的都没看到,然后简单的动了动鼠标滚轮看到了如下场景
这眼熟的过渡效果,结合我多年基于地图开发经验,立马联想到瓦片地图图片,毫不犹豫的切换到 network nice! 抓到了我想看到的东西
通过鼠标 select dom 可以看到对应出一块一块图片
不出我所料 地图底图和地图点走的都是瓦片图片,那么问题来了他是怎么进行交互的?
通过一段操作后发现在 广视图下是没法进行操作的自由缩放到一定比例才可以进行操作 如图
猜想:
1、缩放到一定比例 才替换成地图的可操作类?
2、和canvas类似 在这种视图下通过鼠标点击 获取经纬度计算范围进行容错取值到这个点
结果偏向第二个猜想,不过总体上来说还可以接受 这种方式 基本不存在展示上限,并且兼容性很好(因为是基于图片,在ie这种浏览器上面跑问题也不大)