实现echarts地图监听缩放事件效果

echarts地图缩放事件

最近应项目要求需要做地图放大展示markpoint标记点,缩小标记点消失在这里插入图片描述
在这里插入图片描述
以上就是效果图,主要就是用到了echarts的georoam事件,官方文档没有看到这个事件,这个事件能监听缩放与拖曳事件,话不多说直接上代码
在这里插入图片描述
georoam事件可以取到zoom值,但是是一个固定值,需要变通一下,通过getOption()方法取到当前zoom值,然后就可以通过判断zoom值做你想要做的事了嘿嘿嘿(手动狗头.),当然代码肯定是要进行优化的,不然要卡顿,因为georoam能同时响应缩放和拖曳。不过我这里代码也勉强够用了,嘻嘻。在此非常感谢指导我的一位大佬。。。(ps:用这个事件注意需要结合geo)
在这里插入图片描述
最后附上一个下载阿里的geojson数据的地址:http://datav.aliyun.com/tools/atlas/#&lat=31.914867503276223&lng=104.1064453125&zoom=4
还有两个手动画geojson数据的地址:http://geojson.io/?tdsourcetag=s_pcqq_aiomsg#map=9/27.2595/110.4648、https://www.strerr.com/geojson/geojson.html#map=5/32.157/98.306(或者下载一个Arcgis)

  • 13
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
ECharts是一个强大的JavaScript图表库,它可以用来创建交互式的数据可视化图表。在ECharts中,你可以利用其地理地图组件来制作中国乃至湖南地图,并在地图上展示数据。下面是使用ECharts实现湖南地图的基本步骤: 1. **引入ECharts库**: 首先,在HTML文件中引入ECharts的CDN链接或者本地文件。 ```html <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script> ``` 2. **初始化地图**: 创建一个ECharts实例,并设置地图类型为China或Hunan(湖南地图可能需要自定义地图数据)。 ```javascript var myChart = echarts.init(document.getElementById('map')); myChart.setOption({ map: 'Hunan', // 如果没有内置,可能需要自己提供省份编码 }); ``` 3. **加载地图数据**: ECharts的地理地图功能通常依赖于百度地图API或者其他地图服务提供商的数据。你需要获取省份边界信息和名称对应的数据。 ```javascript var geoCoordMap = { // 假设这是湖南地图的地理坐标映射 "湖南": [[...]] }; ``` 4. **绘制地图**: 使用`geochart`配置项,结合地图数据来绘制地图。 ```javascript myChart.setOption({ geochart: { regions: geoCoordMap.Hunan, roam: true, // 是否开启鼠标缩放 label: { show: false // 隐藏默认标签 } } }); ``` 5. **添加交互和数据绑定**: 可以添加点击事件监听器,根据用户选择的省份显示相关数据。 ```javascript myChart.on('click', function (params) { var province = params.name; // 获取点击省份名 // 根据province获取并展示对应的数据 }); ```
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值