raphael.js draws China map map drawing method_javascript skills

A map of China is used in a recent data statistics project, which is to dynamically display the statistical data of a certain province and region in a certain time period on the map. We don’t need flash, we just rely on raphael.js and SVG images. Complete the interactive operation of the map. In this article, I will share with you how to use js to complete map interaction.

Let’s briefly introduce raphael.js. raphael.js is a small javascript library that can draw various vector graphics, various charts, image cropping, rotation, motion animation and other functions on web pages. In addition, raphael.js is also cross-browser compatible, and it is also compatible with the old IE6. The official website address of raphael.js: http://raphaeljs.com/

Preparation

We need to prepare a vector map. You can find a vector map from the Internet, or use illustrator to draw a vector map, and then export it to a file in SVG format. This file can be opened on a browser and then the content inside is extracted. path path information (coordinates starting with M). And prepare the map path information according to the format of chimamapPath.js.

Copy code The code is as follows:

var china = [];

function paintMap(R) {
var attr = {
"fill": "#97d6f5",
"stroke": "#eee",
"stroke-width": 1,
"stroke-linejoin": "round"
};

china.aomen = {
name: "Macau",
path: R.path("M413.032,. ........Omit some... ,414.183z").attr(attr)
}
china.hk = {
  //Format is the same as above
};
}

The above is how we encapsulate the prepared map path information into the () function, and save the file name as chinamapPath.js for later calling.

HTML

First load the raphael.js library file and chimamapPath.js path information file in the head section.

Copy code The code is as follows:

Then place div#map in the body where the map needs to be placed.

Copy code The code is as follows:

JAVASCRIPT

First we call the map in the page, the method is as follows:

Copy the code The code is as follows:

window.onload = function () {
//Draw the map
var R = Raphael("map", 600, 500);//Load the map into the div with id map , and set the area to 600x500px size.
paintMap(R);
}

At this time, when we open it with a browser, the loaded map will be displayed. Next, we need to add province names to the corresponding province areas in the map, and a color-changing animation effect when the mouse slides over each province block.

Copy code The code is as follows:

window.onload = function () {
var R = Raphael("map", 600, 500);
//Call the map drawing method
paintMap(R);

var textAttr = {
"fill": "#000",
"font-size": "12px",
"cursor": "pointer"
};

                                                                                                                                                                        {

//Get the center coordinates of the current graphic
var xx = st.getBBox().x (st.getBBox().width / 2);
var yy = st.getBBox( ).y (st.getBBox().height / 2);

                                                                                                                                                                                            ]['name']).attr(textAttr);

st[0].onmouseover = function () {//Mouse slide to
st.animate({fill: st.color, stroke : "#eee"}, 500);
                                                                        .onmouseout = function () {// The mouse leaves
St.animate ({Fill: "#97d6F5", Stroke: "#eee"}, 500);
China [State] ['Text']. );
              R.safari(); 🎜>

The methods provided by raphael are used in the above code: getColor, getBBox, animate, toFront, etc. These instructions can be found in the raphael documentation and will not be described in this article.
In addition, due to the size of the map, some province names are not displayed appropriately in the map, and the offset needs to be corrected so that they look more comfortable.





Copy code


The code is as follows:

window.onload = function () {
    var R = Raphael("map", 600, 500);
    ...
    for (var state in china) {
        ...
        (function (st, state) {
            ....
            switch (china[state]['name']) {
                case "江苏":
                    xx += 5;
                    yy -= 10;
                    break;
                case "河北":
                    xx -= 10;
                    yy += 20;
                    break;
                case "天津":
                    xx += 10;
                    yy += 10;
                    break;
                case "上海":
                    xx += 10;
                    break;
                case "广东":
                    yy -= 10;
                    break;
                case "澳门":
                    yy += 10;
                    break;
                case "香港":
                    xx += 20;
                    yy += 5;
                    break;
                case "甘肃":
                    xx -= 40;
                    yy -= 30;
                    break;
                case "陕西":
                    xx += 5;
                    yy += 10;
                    break;
                case "内蒙古":
                    xx -= 15;
                    yy += 65;
                    break;
                default:
            }
            ...
      })(china[state]['path'], state);
   }
}