地图下钻、地图点聚合

项目地址:mapUnder-points

需求

首先是需要有一个地图下钻的功能来展示不同地区的数据,其次展示商户的位置(点聚合),由于坐标点太多,从后端传到前端数据量太大会导致高德地图加载过慢,所以将地图下钻和点聚合整合在一次,当地图下钻点击到县级时进入高德地图点聚合。

mapUnder-points

地图下钻、地图点聚合

对前端代码不是太熟悉,有错误请提出,共同学习!

技术

SpringBoot 后端
SpringBoot-thymeleaf、js 前端
mysql 数据库

数据库

使用时请先参考添加数据库

地图下钻

参考:https://github.com/touxing/echarts3-chinese-map-drill-down
参考上面的代码,在原基础上添加每个地区展示多个数据值,在原基础上增加后端代码,同时添加地图点聚合功能

在这里插入图片描述

地图点聚合

  当地图点到县级时,传输行政区划到后端,后端使用行政区划拿到这个地方的商家坐标,然后传输到前端,使用高德地图进行渲染。
  后期此处可优化为鼠标放在坐标上展示这个坐标需要展示的信息,已在数据库预留属性。
  请先请求高德key,将key添加到js中
在这里插入图片描述

使用右键返回上一层,全国->全省->全市(最大下钻到县区)->全县区的点聚合

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

week@eight

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值