项目地址:mapUnder-points
需求
首先是需要有一个地图下钻的功能来展示不同地区的数据,其次展示商户的位置(点聚合),由于坐标点太多,从后端传到前端数据量太大会导致高德地图加载过慢,所以将地图下钻和点聚合整合在一次,当地图下钻点击到县级时进入高德地图点聚合。
mapUnder-points
地图下钻、地图点聚合
对前端代码不是太熟悉,有错误请提出,共同学习!
技术
SpringBoot 后端
SpringBoot-thymeleaf、js 前端
mysql 数据库
数据库
使用时请先参考添加数据库
地图下钻
参考:https://github.com/touxing/echarts3-chinese-map-drill-down
参考上面的代码,在原基础上添加每个地区展示多个数据值,在原基础上增加后端代码,同时添加地图点聚合功能
地图点聚合
当地图点到县级时,传输行政区划到后端,后端使用行政区划拿到这个地方的商家坐标,然后传输到前端,使用高德地图进行渲染。
后期此处可优化为鼠标放在坐标上展示这个坐标需要展示的信息,已在数据库预留属性。
请先请求高德key,将key添加到js中
使用右键返回上一层,全国->全省->全市(最大下钻到县区)->全县区的点聚合