1. 程式人生 > >監聽Echarts 裏的地圖縮放事件

監聽Echarts 裏的地圖縮放事件

echarts 監聽地圖縮放事件

 // 獲取百度地圖實例,使用百度地圖自帶的控件
    var bmap = myChart.getModel().getComponent(‘bmap‘).getBMap();
    bmap.setMapStyle({style:‘normal‘});
    bmap.addControl(new BMap.MapTypeControl());
    bmap.addControl(new BMap.ScaleControl()); 
    bmap.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));  

    bmap.enableAutoResize();
    //調用百度的方法,使用bmap對象
    if (center_x == 0) {
        var point = new BMap.Point(116.404, 39.915);
        bmap.centerAndZoom(point, 4.5);
    }
    else {
        var point = new BMap.Point(center_x, center_y);
        bmap.centerAndZoom(point, zoomvalue);
    }


    var RegionData = [];//清空上一次的數據
    var AreaData = [];

    bmap.addEventListener("zoomend", function ()
    {
        console.log(this.getZoom());//這句為了每次打印每次縮放完後的等級,但只打印一次,說明重新setOption後,給地圖實例註冊的監聽事件會丟失
        $.each(dataJson, function (index, item)
        {
           
            var Location = [item["經度"], item["緯度"], 170];

            if (AreaData.length < dataJson.length)
                AreaData.push({ id: item.AreaID, name: item["區域名稱"], value: Location, itemStyle: { normal: { color: ‘#00c6ff‘ } } });


            //獲取第一個區域的經緯度作為經濟帶的經緯度
            var RegionIsExist = false;
            for (var i = 0; i < RegionData.length; i++)
            {
                if (RegionData[i].name == item["經濟帶名稱"])
                {
                    RegionIsExist = true;
                    break;
                }
            }
            if (RegionIsExist)
            {
                return true;//繼續下一個循環
            }

            if (RegionData.length < 4)
                RegionData.push({ id: item.RegionID, name: item["經濟帶名稱"], value: Location, itemStyle: { normal: { color: ‘#00c6ff‘ } } });

        });

         
        if (this.getZoom() < 8)
        {
            option.series[0].data = RegionData;
            myChart.setOption(option, true,true);
        }

        else
        {
            option.series[0].data = AreaData;
            myChart.setOption(option, true, true);
        }


    });

這個監聽只能監聽一次,所以不理想,不知道是不是跟第一行代碼獲取百度實例的方式有關系.希望有經驗的大神可以告知.

本文出自 “銀翼神駒” 博客,請務必保留此出處http://leesolo.blog.51cto.com/2672511/1954556

監聽Echarts 裏的地圖縮放事件