The implementation of Drill-down and return function of multi-level map in provinces and cities based on Echarts Plug-ins __echarts

ECHARTS3 Off-line map components, more easily than echart2 to achieve provincial urban multi-level off-line map display.

Of course echart2 can also be achieved, because Echarts is based on canvas, loading a map is simply to load a picture. And this map, is the use of each map of the latitude and longitude of the boundary, the composition of a surface. Theoretically, just give a collection of map edge points, use echarts, and say exactly what map shapes we want to show with canvas technology.

implementation of the idea: in order to achieve multi-level (provinces and cities) map of the mutual switch, this article uses the click of the mouse Event trigger page for the next level map (such as: from the national map to Hunan Province map), with a double click of the mouse event to return to the previous map (such as: from The return of the previous level map implementation can also be implemented using the right mouse button event. The right mouse button may be better than double-clicking, because double-clicking is easy to click.

Implementation Tools : Echarts plug-ins, map json files.
The offline JSON file for the national province of the city has been uploaded to GitHub:

There are two main ways to achieve this: the main difference is how to return to the previous level.
Method 1: Double click the map to return to the previous level map;
Method 2: Right-click the "Go Back" button to return.
In specific code, we introduce two methods, first describing their common functions: Loadmap. This function is primarily used to load maps. $.getjson is the AJAX function for the jquery plugin.

/** Load Map: According to the map of the provinces and cities of the administrative number, get the corresponding JSON map data, and then to Echarts register the area map last load map information @params {String} mapcode: Map administrative number, for example[ ' China ': ' 100000 ', ' Hunan ': ' 430000 '] @params {String} mapname: Map name/function Loadmap (Mapcode, mapname) {$.getjson (' ch ina-main-city/' + Mapcode + '. Json ', function (data) {if (data) {//register map to Echarts plugin Ech
             Arts.registermap (mapname, data);
                var option = {tooltip: {trigger: ' item ', formatter: ' {b} ' }, Series: [{name: ', Typ
                        E: ' Map ', Maptype:mapname, Selectedmode: ' Multiple ',
                            Label: {normal: {show:true
             }, emphasis: {Show:true               }}, data:[]}
             ]
             };
             mychart.setoption (option);     
         Curmap = {mapcode:mapcode, mapname:mapname};
         else {alert (' Unable to load the map ');
}       
    }); }

Method 1 : Use the user to click the drill down map to the lower map, and double-click the map to return to the superior map. The response method for double-clicking the event was delayed by 250 milliseconds because of the click Affected by double-clicking. This allows you to immediately dismiss the callback event that you clicked once the double-click event is detected. This way, the chart responds only to the double-click event. When the user clicks, if you can drill down, the current map information is stored on the stack (using the advanced features of the stack) to facilitate the retrieval of the returned map information. Shown in the following code:

/** bound user Toggle Map Area Event Citymap object stores the map area name and area information (Name-code) when the Mapcode has a value, the description can switch to the lower map and save the superior map.
    Number and name/Mychart.on (' mapselectchanged ', function (params) {cleartimeout (TIMEFN);
        Because the Click event and double-click the event conflict, the response event for the click is delayed by 250 milliseconds to execute timefn = settimeout (function () {var name = Params.batch[0].name;
        var mapcode = Citymap[name];
            if (!mapcode) {alert (' No such area map display ');
        Return 
        } loadmap (Mapcode, name);
        Press the above-level map information into Mapstack Mapstack.push ({mapCode:curMap.mapCode, mapName:curMap.mapName 
    });   
}, 250);
}); /** bind double click event and load upper level map/Mychart.on (' DblClick ', function (params) {//When double-click event occurs, clear click event, respond only to double-click Event Cleartimeout (TIMEFN)
    ;
    var map = Mapstack.pop ();
        if (!mapstack.length &&!map) {alert (' has reached the top level map ');
    Return
} loadmap (Map.mapcode, map.mapname); });

Method 2 : Use the right key event for the chart, and then click on the "Go Back" button to return. The advantage of method Two is that there is no need to use a timer to delay, that is, a callback event that is clicked can respond immediately without delay of 250 milliseconds. Shown in the following code:

/**
   bound user Toggle Map Area Event
   Citymap object stores the map area name and area information (Name-code)
   when Mapcode has a value description you can switch to a lower map
   . Save the number and name
of the superior map at this time *
/Mychart.on (' mapselectchanged ', function (params) {   
    var name = Params.batch[0].name;
    var mapcode = Citymap[name];
    if (!mapcode) {
        alert (' No such area map display ');
        return;
    }
    Loadmap (Mapcode, name); 
    Press the above-level map information into the Mapstack
    Mapstack.push ({
        mapCode:curMap.mapCode,
        mapName:curMap.mapName
    });
/**
   bind right Key event
* *
mychart.on (' ContextMenu ', function (params) {
   $ (' #contextMenu '). CSS ({
       Left:params.event.offsetX,
       Top:params.event.offsetY
   }). Show ();
/**
   respond to the right key event of the chart, return to the previous map
/$ (' #contextMenu '). On (' click ', Function () {
    $ (this). Hide ();
    Get top level map information
    var map = Mapstack.pop ();
    if (!mapstack.length &&!map) {
        alert (' has reached the top level map ');
        return;
    }
    Loadmap (Map.mapcode, map.mapname);  
});

Click the drill down and double-click to return the entire code as follows:

<! DOCTYPE html>  
  Click the Drill and the right-click menu returns  with all the following code: 
 

<! DOCTYPE html>  
conclusion : Both methods have their own advantages and disadvantages, the method is more convenient to operate than two, but easy to operate; method two, which requires additional right key operations, binds the DOM for callback processing. If need to further to the map display effect processing, may directly to the LOADMAP function option object operation, passes the corresponding parameter to be possible. In fact, as long as there is a display area of the JSON contour data, and then configure the corresponding parameters in the China-main-city-map.js, this design and implementation method, can fully achieve multi-level (up to No limit) map switching.
The actual effect, as shown in the following illustration:
(1) Initialize to national map


(2) Click to enter the lower map (such as Hunan map)


(3) Click to enter the lower map (such as the Changsha map below Hunan)


(4) Double-click Return or right to return to the previous level map



(5) Double-click Return or right to return to the previous level map


Download Address : Detailed source code has been uploaded to the csdn, address: http://download.csdn.net/download/mulumeng981/9962651