home > GIS > maptalks >

监听echarts地图缩放事件,SVG地图上的标注跟随缩放-散点地图

author:zhoulujun@live.cn    hits:

echart渲染地图,实现自定义标注,标注不随地图缩放的解决方案。虽然通过symbol 和label会有缩放效果,但是实现的标注视觉效果差强人意。

一般地图展示,还是首选echart渲染出svg地图,比如散点地图,飞行地图等。比如地图标注,可以通过 series.label设置,

也可通过叠加散点图,通过symbol 和label一起控制,但是这两种,样式差强人意。但是可以跟随地图缩放

最好还是通过HTML+css3实现,效果更好。

通过echart.convertToPixel ('geo', 坐标) 转换为像素,再把div通过绝对定位position:absolute,设置left top 定位

这种方式实现自定义标注,标注不会随着地图

https://echarts.baidu.com/api.html#events

官方没有提供地图缩放事件监听。还是通过搜索,查看两篇文章

代码如下

myChart.on('georoam', function (params) {
    // 控制台打印数据的名称
    console.log(params.zoom);
    let _optionTemp = myChart.getOption();
    let _zoom = _optionTemp.series[0].zoom;
    console.log(_zoom)
});



转载本站文章《监听echarts地图缩放事件,SVG地图上的标注跟随缩放-散点地图》, 请注明出处:https://www.zhoulujun.cn/html/GIS/maptalks/2016_0215_2548.html