• home > GIS > maptalks >

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

    Author:zhoulujun@live.cn Date:

    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