简介
本文将带领读者一步步实现一个具有地图选点、范围查询等功能的数据可视化页面,同时添加了美观友好的marker加载动画效果,不废话了, let's get it
效果预览
确定需求
1.以当前用户所选中心点为圆心,半径1、2、3、4km为半径查询范围内写字楼并展示
2.每个写字楼的标记点出现顺序由内而外依次出现(1km->2km->3km->4km)并实现动画效果
3.切换范围半径、点击地图、拖拽圆形覆盖物时根据新的圆心经纬度和半径更新数据,并且自动缩放和定位到合适的视角
4.实现具有缩放、定位功能的自定义地图工具条
准备工作
本例主要使用React+React-Amap(基于React封装的高德地图组件)来实现,react-amap帮我们封装好了一些marker和覆盖物组件,使用起来相当方便,当然你也可以阅读学习后根据你当前的技术栈来进行改造
首先安装react-amap
1.绘制基础地图
2.绘制圆形覆盖物 [参考]
需要注意的点:我们为覆盖物设置的半径对应地图上实际的物理尺寸(m)
在组件UI完成后只需为最里面的同心圆绑定相应的拖拽事件并动态设置地图的center，其他同心圆的center跟随其一起变动即可
draggingStart:设置onDraggin=true 此标识可以用来控制loading,清除已有数据等
dragging:通过回调函数获取当前移动的经纬度并赋值给 Circle 覆盖物使其移动
draggingEnd:通过回调函数获取最终坐标,你可以此坐标去查询周边数据
3.绘制标示牌marker
使用 extData 属性可以使任何marker或覆盖物获取自定义数据
利用 CSS3 transform: rotateY(deg)属性可实现类似翻牌的动画效果
实现效果
这里讲解一下如何动态设置每个标示牌marker的位置，使其在每个同心圆间距的等分处
首先要明确一个比例就是 经纬度/实际距离 约等于 100000/1
我们只需得到实际距离的偏移量再用这个比例换算出偏移经纬度即可
那么利用简单的三角函数知识我们就可得知
标示牌精度= 圆心经度+圆的半径*cos(45)*0.00001
同理
标示牌纬度= 圆心纬度+圆的半径*sin(45)*0.00001
注:这里三角函数的45度可以随意调整
4.绘制数据坐标点marker并添加动画
关键点就是根据每个marker的顺序动态设置 animationDelay 属性 即可实现错落加载动画
stylus
实现效果
5.绘制自定义地图工具条
通过 AMap.Geolocation 构造器可以获取到定位示例进行定位操作
6.距离范围选择器
自己画或者antd-slider组件与数据联动即可，比较简单，这里不再赘述
7.高德地图插件引入方法
react-amap支持的的高德组件不全,在我们申请的key后按需添加所需组件名即可引入你用到的组件
8.写在最后
如果react-amap的功能无法满足你的需求,那么我们可以通过其提供的 created函数,或者new window.Amap()的形式获取到高德地图的示例,即可调用其原生api进行功能拓展
可见使用react-amap等第三方库并不会限制我们开发功能,其针对react封装的诸多组件很大程度上提高了我们的开发效率和可读性
