Use Echarts to implement the map drill down function (a province of the city down to the county level)

Here is a simple demo:

var cityMap = {"Changsha": "430100", "Zhuzhou": "430200", "Xiangtan": "430300", "Hengyang": "430400", "Shaoyang": "430500", "Yueyang City ":" 430600 "," Changde ":" 430700 "," Zhangjiajie ":" 430800 "," Yiyang ":" 430900 "," Chenzhou ":" 431000 "," Yongzhou ":" 431100 "," Huaihua City ":" 431200 "," Loudi ":" 431300 "," Xiangxi ":" 433100 "};var curindx = 0;var Maptype = [];var Mapgeodata = require (' E    Charts/util/mapdata/params '); for (var. cityMap) {Maptype.push (city);            Custom extension chart type mapgeodata.params[city] = {Getgeojson: (function (c) {var geojsonname = citymap[c]; return function (callback) {$.getjson (' geojson/china-main-city/' + geojsonname + '. Json ', Callba            CK); }}) (city)}}var EcConfig = require (' echarts/config '); var zrevent = require (' zrender/tool/event ');d Ocument.getel    Ementbyid (' main '). OnMouseWheel = function (e) {var event = e | | window.event; Curindx + = Zrevent.getdelta (event) > 0?    (-1): 1;        if (Curindx < 0) {Curindx = maptype.length-1;    } var mt = maptype[curindx% maptype.length];    Option.series[0].maptype = MT;    Option.title.subtext = MT + ' (scroll wheel or click to toggle) ';    Mychart.setoption (option, true); Zrevent.stop (event);};    Mychart.on (EcConfig.EVENT.MAP_SELECTED, function (param) {var mt = Param.target;    var len = maptype.length;    var f= false;              for (Var i=0;i<len;i++) {if (Mt = = Maptype[i]) {f =true;        Mt=maptype[i];  }} if (!f) {mt= ' Hunan ';    } option.series[0].maptype = MT;    Option.title.subtext = MT + ' (scroll wheel or click to toggle) '; Mychart.setoption (option, True);}); O Ption = {title: {text: ' National 344 major cities (counties) map by Pactera Chen ran ', Link: ' http://www.pactera.com/', subte XT: ' Changsha (scroll wheel or click Toggle) '}, tooltip: {trigger: ' item ', Formatter: ' Scroll wheel or click Toggle <br/>{b} '}, Serie S: [{name: ' National 344 major cities (counties) map ', type: ' Map ', Maptype: ' Hunan ', SELECTEDMO    De: ' Single ',        itemstyle:{Normal:{label:{show:true}}, Emphasis:{label:{show:true}},                     Data:[]}]};

Copy the above part of the code and paste the overlay to <a target=_blank href= "http://echarts.baidu.com/doc/example/mix5.html" >http:// Echarts.baidu.com/doc/example/mix5.html</a> the black area to the left, then click Refresh to see the effect.

Among them <span style= "font-family:arial, Helvetica, Sans-serif;" >var Mapgeodata = require (' echarts/util/mapdata/params '); My understanding is to find param.js this file, and then execute the loop to load city-corresponding county data into the Param.js file </span><pre name= "code" class= "HTML" >

For (Var city, CityMap) {    maptype.push (city);    Custom extension Chart type    mapgeodata.params[city] = {//city        Getgeojson: (function (c) {//city corresponding county data            var geojsonname = CITYMAP[C];            return function (callback) {                $.getjson (' geojson/china-main-city/' + geojsonname + '. JSON ', callback);            }        }) (city)    }}

</pre>

This is written in my own project:

<script type= "Text/javascript" >/* Load County Data   *  /var cityMap = {          "Changsha": "430100",          "Zhuzhou": "430200",          "Xiangtan": "430300",          "Hengyang": "430400", "Shaoyang": "430500", "Yueyang": "430600"          ,          "Changde": "430700", "          Zhangjiajie City" ":" 430800 ","          Yiyang ":" 430900 "," Chenzhou ":" 431000 "," Yongzhou ":" 431100 "          ,          " Huaihua ":" 431200 ",          " Loudi ":" 431300 ",          " Xiangxi ":" 433100 "    };    var maptype = [];    var base = ' <%=request.getcontextpath ()%> ';    var mapgeodata = require ('/szft/js/echarts/src/util/mapdata/params ');//This is a file that needs to be extended (county-level data archive) <span style= " Font-family:arial, Helvetica, Sans-serif; > (This path to write to, otherwise reported JS error: </span><pre name= "code" class= "HTML" ><span style= "White-space:pre" ></ Span>//...is not Exist<span style= "font-family:arial, Helvetica, Sans-serif;" >) </span>

For (Var city in CityMap) {//load county map data maptype.push 14 cities;//Add 14 cities to the Params.js file//Custom extension chart type//Mapgeodata.params[ci Ty] = {//callback, load 14 municipalities corresponding County data echarts.util.mapdata.params.params[city] = {//callback, load 14 cities corresponding county data (this path to write to, otherwise reported JS error: ... is not exist) Getgeojson: (function (c) {var geojsonname = citymap[c]; return function (callback) {$.getjson (base+ '/js/echarts/ doc/example/geojson/china-main-city/' + Geojsonname + '. JSON ', callback); }}) (city)}}/** * Check the map */function selectedmap () {Mychart.on (Echarts.config.EVENT.MAP_SELECTED, function (param) {// City-Level Click event var selectedcity = param.target;//Click Get the name of the corresponding city var flag = false; var selected = param.selected; For (var p in selected) {Getvodlist (MAPUTIL.FINDFBDM (selectedcity), selectedcity);//load the right-hand list if (p = = selectedcity) {flag = true;//selected is one of the 14 cities selectedcity = p; }} if (flag) {//The selected city is one of 14 cities, redraw the map to enter the city's County map (drill down to county level) var map = new map (); map = Getmap (selectedcity,3); Initmap (Map,selec Tedcity, ' XJ '); $ (' #Header '). CSS (' Display ', ');//Show hidden return button Mychart.on (Echarts.config.EVENT.MAP_SELECTED, function (param) {//Sub-county Click event var selectedtown = param.target;//Click Get the name of the corresponding county Getvodlist (MAPUTIL.FINDFBDM (Selectedtown), selectedtown);//Load Right-side list}); } });} </script>

Use Echarts to implement the map drill down function (a province of the city down to the county level)