技术分享 Technology to share

地图展示大量数据解决方案

地图展示大量数据解决方案


方案一、采用瓦片图片加载 放到一定级别在进行处理(如图所示)


地图上面可以看到很多密密麻麻的点、但整体操地图作却感觉不到卡,这就很奇怪了、第一猜想是基于canvas实现的海量点,接着就是 f12 -> elements -> ctrl+f -> '<canvas' ....居然一个匹配的都没看到,然后简单的动了动鼠标滚轮看到了如下场景



这眼熟的过渡效果,结合我多年基于地图开发经验,立马联想到瓦片地图图片,毫不犹豫的切换到 network nice! 抓到了我想看到的东西



通过鼠标 select dom  可以看到对应出一块一块图片



不出我所料 地图底图和地图点走的都是瓦片图片,那么问题来了他是怎么进行交互的?


通过一段操作后发现在 广视图下是没法进行操作的自由缩放到一定比例才可以进行操作 如图



猜想:

1、缩放到一定比例 才替换成地图的可操作类?

2、和canvas类似 在这种视图下通过鼠标点击 获取经纬度计算范围进行容错取值到这个点



结果偏向第二个猜想,不过总体上来说还可以接受 这种方式 基本不存在展示上限,并且兼容性很好(因为是基于图片,在ie这种浏览器上面跑问题也不大)


方案二 采用基于canvas 的海量点进行处理


方案三 标注和标注图层坐标避让。(待验证)


方案三 按索引聚合(待验证)

上一篇: echart动态更新数据

下一篇: javascript 中奇怪的符号作用