apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.59k stars 19.62k forks source link

echart结合百度地图实现地图下钻无法返回上一级 #9360

Closed DorisOu closed 6 years ago

DorisOu commented 6 years ago

ehcart 里使用百度地图api,可以实现点击下钻到镇的地图,但是无法返回到市级地图。

Version & Environment [版本及环境]

Expected behaviour [期望结果] 点击能返回到市级

核心代码: //地图下钻 var provinces = { '东凤镇': 'childMaps/dongfeng.geo.json', '南头镇': 'childMaps/nantou.geo.json' };

//各镇的数据
var allData = [{
    name: '东凤镇'
}, {
    name: '南头镇'
}];
// loadMap('../js/mapdata/zhongshan2.geo.json', 'zs');  //因为我这里用的是百度地图所以不用屌用这个函数

var timeFn = null;

//单击切换到镇地图,当mapCode有值,说明可以切换到下级地图
scatterMap.on('click', function(params) {
    clearTimeout(timeFn);
    //由于单击事件和双击事件冲突,故单击的响应事件延迟250毫秒执行
    timeFn = setTimeout(function() {
        var name = params.name; //地区name
        var mapCode = provinces[name]; //地区的json数据
        if (!mapCode) {
            alert('无此区域地图显示');
            return;
        }

        loadMap(mapCode, name);

    }, 250);
});

// 绑定双击事件,返回中山市地图
scatterMap.on('dblclick', function(params) {
    //当双击事件发生时,清除单击事件,仅响应双击事件
    clearTimeout(timeFn);

    //这里要如何返回中山市地图?
    // loadMap('../js/mapdata/zhongshan2.geo.json', 'zs');
});

//获取对应的json地图数据,然后向echarts注册该区域的地图,最后加载地图信息
function loadMap(mapCode, name) {
    $.get(mapCode, function(data) {
        if (data) {
            echarts.registerMap(name, data);
            var option = {
                tooltip: {
                    show: true,
                    formatter: function(params) {
                        if (params.data) return params.name + ':' + params.data['value']
                    },
                },
                visualMap: {
                    type: 'continuous',
                    text: ['', ''],
                    showLabel: true,
                    left: '50',
                    min: 0,
                    max: 100,
                    inRange: {
                        color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096', ]
                    },
                    splitNumber: 0
                },
                series: [{
                    name: 'MAP',
                    type: 'map',
                    mapType: name,
                    selectedMode: 'false', //是否允许选中多个区域
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data: allData
                }]
            };
            scatterMap.setOption(option);
        } else {
            alert('无法加载该地图');
        }
    });
}
pissang commented 6 years ago

统一在https://github.com/apache/incubator-echarts/issues/9371 下回复