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

已于 2022-10-10 14:42:04 修改
阅读量2.4w 收藏 26
点赞数 13
分类专栏： echarts地图 文章标签： echarts地图问题
于 2018-09-18 16:58:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42980124/article/details/82760333
版权

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）

qq_42980124
关注
专栏目录
echartsmapgeo跟随缩放移动.pdf
05-08
精品资料欢迎下载
echarts 监听地图缩放和移动事件
yiyueqinghui的博客
05-29 9163
Vue中监听echarts实现的中国地图缩放事件，方法如下： //初始化中国地图 initEchartMap() { let mapDiv = document.getElementById("material_map_box"); let myChart = echarts.init(mapDiv); myChart.setOption(this.options); this.myChart = myChart; thi
监听Echarts 里的地图缩放事件
weixin_33701294的博客
08-08 1062
//获取百度地图实例，使用百度地图自带的控件 varbmap=myChart.getModel().getComponent('bmap').getBMap(); bmap.setMapStyle({style:'normal'}); bmap.addControl(newBMap.MapTypeControl()); bmap.a...
echars地图 另类版拖拽与放大缩小
weixin_48091030的博客
08-05 155
此处要注意，因为是接上篇文章中的下钻功能，会出现一个bug也就是拖拽是一个点击前 点击中 点击后的过程，那么click是会被这个过程所影响的，所以我们此处加入了一个setDragg 当点击了以后 dragging.value会产生值那么 如果触发点击中（dodrag）会将这个值改为3（也就是拖拽否则就是点击 让其进入点击事件）因为在上一篇文章内写了echars地图的点击下钻 返回上一级（主要是因为地图为了做伪3D，将2张echars地图叠到一块了，导致使用自带的功能，会拖拽一个，而底层的会留在原地）
Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）
QC班长的博客
06-13 8692
大屏项目显示云南省3D的地图，可拖拽缩放、地图打点、点击图标弹框等等功能。
监听页面大小,使echarts自适应缩放
m0_65930596的博客
10-09 904
但是在打开F12调试窗口时发现echarts图标里面的内容并不会随着页面大小变化而改变元素宽高,resize() 调用echarts中内置的resize函数进行自适应缩放。给echarts图标设置宽高时用的是vh和vw,这就导致一些元素会挤压或者超出原本设定的范围大小,可以在mounted中使用监听浏览器窗口缩放,
Echarts地图缩放(平面,3D,scatter(散点))
热门推荐
weixin_44031176的博客
08-24 1万+
Echarts地图缩放 平面地图缩放设置(roam : true 允许缩放;false 禁止缩放): bmap: { type:'map', //地图中心经纬度。 center: [116.46, 39.92], //地图的缩放等级 一次性放大的大小 zoom: 10, // 是否开启鼠标缩放和平移漫游。默认不开启。 如果只想要开启缩放或者平移， 可
geo组件中添加roam和zoom对散点图的影响(已解决)
believet93的博客
12-03 1902
1、在配置geo组件的roam=true或者zoom放大倍数（不等于1）后，窗口放大缩小会是散点图的坐标错位。贴上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 ech...
angular7+echarts实现地图缩放和切换
01-03
综上所述，实现"angular7+echarts实现地图缩放和切换"的功能，需要对Angular7的组件和生命周期有深入理解，熟悉ECharts的配置项和事件处理，以及GeoJSON地图数据的使用。通过合理的代码组织和优化，我们可以构建出...
成都市echarts地图下钻功能实现
08-30
总的来说，实现成都市ECharts地图下钻功能需要理解ECharts的`geo`组件，掌握地图数据的加载和解析，以及事件监听和处理。通过巧妙的配置和编程，我们可以创建出既有实用价值又具有视觉吸引力的地图应用。
echarts 3D地图，地图区域点击触发事件.rar.rar
01-04
6. **交互功能**：ECharts 3D地图支持缩放、平移、旋转等交互操作，用户可以通过鼠标或触摸设备进行操作。此外，还可以添加自定义的工具提示，显示地图区域的数据详情。 7. **自定义行为**：在点击事件回调中，可以...
新疆echarts地图资源
12-30
除了基本的地图展示，ECharts还支持地图交互，如缩放、平移、点击事件监听等。你可以自定义地图上的标记，添加动态效果，或者与其他图表联动，以实现更复杂的可视化需求。对于开发者来说，理解和掌握如何利用这些...
echarts实现北京市地图
04-11
ECharts地图支持多种交互操作，如缩放、平移、点击高亮等。你可以通过设置`geo`或`series`的选项来调整这些行为。 通过以上步骤，你就可以成功地在网页上展示一个基本的北京市地图了。进一步，你可以根据实际需求...
echarts 监听地图放大缩小
藕粉桂花糖糖糕的博客
12-03 876
【代码】echarts 监听地图放大缩小。
echarts 监听地图放大缩小事件
sinat_33255495的博客
02-15 1495
注意：监听的 georoam方法的前提：echarts实现的中国地图，option地理坐标组件的配制是geo。
echarts 3d地图 实现多个geo层缩放拖拽同步且不卡顿
weixin_46408500的博客
12-12 4819
原理：监听捕获放大缩小动作，设置下层geo的zoom，center为顶层的zoom，center。 标记点大小是计算放大缩小倍数，重设值图标大小。 注意：最后所有层记得加上animationDurationUpdate:0, 不然或有同步延迟和卡顿
echarts的地图控制缩放和拖拽
weixin_45905537的博客
12-02 8026
echarts的地图控制缩放和拖拽 series: [ { type: "map", map: name, zoom: 2, roam: true, //支持拖拽缩放 scaleLimit: { //滚轮缩放的极限控制 min: 0.5, //缩放最小大小 max: 6, //缩放最大大
Echarts滚轮缩放事件Event API
weixin_60664977的博客
12-30 572
【代码】Echarts滚轮缩放事件Event API。
echarts地图下钻可缩放
jfx
03-16 3479
echarts地图下钻可缩放 在geo中写相关属性 点击查看geo相关属性 geo 地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。 geo: { map: map, // center: [115.97, 29.71],//当前视角的中心点 zoom: 1.2, //当前视角的缩放比例 roam: true, //是否开启平游或缩放 scaleLimit: {
vue中echarts地图的点击事件
最新发布
09-14
在Vue中使用ECharts实现地图的点击事件，需要按照ECharts提供的API进行操作。首先，确保已经在Vue项目中正确安装并引入了ECharts库。然后，在Vue组件的`mounted`钩子中初始化ECharts实例，并设置相应的事件监听器。下面是一个基本的实现步骤： 1. 在Vue组件的`data`对象中定义一个ECharts图表实例变量。 2. 在`mounted`钩子中初始化ECharts实例，并使用`setOption`方法配置图表选项，其中包括事件监听器。 3. 在图表的事件监听器中定义点击事件处理函数，处理用户的点击操作，并执行相应的逻辑。 下面是一个简单的代码示例： ```javascript <template> <div ref="map" class="map"></div> </template> <script> export default { data() { return { chart: null, // ECharts实例 }; }, mounted() { this.initChart(); }, methods: { initChart() { this.chart = this.$echarts.init(this.$refs.map); // 初始化ECharts实例 const option = { geo: { map: 'china', // 地图类型 roam: false, // 是否允许缩放和平移漫游 }, // ... 其他配置项 }; this.chart.setOption(option); // 应用配置项 // 注册地图点击事件 this.chart.on('click', (params) => { // params 包含点击事件相关的参数，例如地理位置名称等 console.log('地图被点击', params); // 根据点击的地区名称或其他参数执行相应逻辑 }); }, }, }; </script> ``` 在上面的代码中，我们创建了一个名为`initChart`的方法来初始化ECharts实例，并注册了一个点击事件监听器。当用户点击地图上的某个区域时，`click`事件会被触发，并打印出相关的参数。
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值