Echarts實現下鑽地圖

問題來源

項目需要echarts進行地圖響應，大致是點擊區域就將該區域放大，實現交互，經過對Echarts2的例子研究，使用geoselectedchanged事件應該能達到效果。

數據

所用數據均可從Echarts下載。

guangxi.js——包含廣西及下屬區域的geojson

nanning.js——只有南寧邊界的geojson，由於select選擇返回的name屬性是漢字，所以最好註冊時換成一樣的名稱(registerMap(xx,...))。

源碼

最大的特點就是利用切換圖的options來實現下鑽，所以要對Echarts的屬性要有所瞭解。

var myChart = echarts.init(document.getElementById('mychart'));
	
   	
	/**
	 * 獲取圖表屬性
	 * @param name select的名稱
	 */
   	function getChartOptions(name){
		return 	{
	   		geo: { //地圖寫在geo組件上
	            map: name, //更換的名稱
	            roam: true,
	            selectedMode: 'single',
	            label: {
	                normal: {
	                    show: true,
	                    textStyle: {
	                        color: 'rgba(0,0,0,0.4)'
	                    }
	                }
	            },
	            itemStyle: {
	                normal:{
	                    borderColor: 'rgba(0, 0, 0, 0.2)'
	                },
	                emphasis:{
	                    areaColor: null,
	                    shadowOffsetX: 0,
	                    shadowOffsetY: 0,
	                    shadowBlur: 20,
	                    borderWidth: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        },       
	   		series: [
	   			{
	   				type: 'scatter', //散點圖-可以添加動態點
	                coordinateSystem: 'geo',
	                data: [{name:'測試',value:[111.277824,23.488651]}],
	                symbolSize: 20,
	                symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
	                symbolRotate: 35,
	                label: {
	                    normal: {
	                        formatter: '{b}',
	                        position: 'right',
	                        show: false
	                    },
	                    emphasis: {
	                        show: true
	                    }
	                },
	                itemStyle: {
	                    normal: {
	                         color: '#F06C00'
	                    }
	                }   
	   			}
	   		]
	    };
	}
   	
   	//最初的屬性
   	myChart.setOption({
   		geo: {
            map: 'guangxi', //全廣西
            roam: true,
            selectedMode: 'single',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,0.4)'
                    }
                }
            },
            regions: [{ //單例樣式
        	    name: '南寧市',
        	    itemStyle: {
        	        normal: {
        	            areaColor: '#666',
        	            color: '#666'
        	        }
        	    }
           }],
            itemStyle: {
                normal:{
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis:{
                    areaColor: null,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },       
   		series: [
   			{
   				type: 'scatter',
                coordinateSystem: 'geo',
                data: [{name:'測試',value:[111.277824,23.488651]}],
                symbolSize: 20,
                symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
                symbolRotate: 35,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                         color: '#F06C00'
                    }
                }   
   			}
   		]
    });
	
	//通過該事件進行底圖的變換
    myChart.on('geoselectchanged', function (params) {
        myChart.setOption(getChartOptions(params.name));
    });

效果

通過點擊南寧市可以下鑽放大到南寧區域，實現效果，而且可以添加自定義的座標點。