監聽Echarts 裏的地圖縮放事件
阿新 • • 發佈:2017-08-08
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 裏的地圖縮放事件