The recent data statistics projects need to be used for Chinese maps, that is, dynamically display statistics in a province and region on the map. We do not need Flash, you can complete the map by relying on Raphael.js and SVG images to complete the map. Interactive operation. In this article, I will share with you how to use JS to complete the map interaction.
Let's briefly introduce Raphael.js. Raphael.js is a small JavaScript library. It can realize various vector maps, various charts, and image cutting, rotation, sports animation and other functions in the webpage. In addition, Raphael.js is also compatible with browsers, and is also compatible with old teeth IE6. Raphael.js's official website Address: http://raphaeljs.com/
Preparation
We need to prepare a vector map, find a vector map from the Internet, or use Illustrator to draw a vector map, and then export files in SVG format. This file can be opened on the browser and then extracts the PATH path information inside information. (Coordinates starting from M). And prepare the map path information in the format of the PATH path information in the format of ChinaMAPPATH.JS.
Copy code code as follows:
var china = [];
function paintMap (R) {
var attr = {{
"Fill": "#97D6F5",
"stroke": "#ee",
"stroke-width": 1,
"stroke-linejoin": "Round"
};
china.aomen = {
name: "Macau",
PATH: R.Path ("m413.032, ............................................ 414.183z"). ATTR (ATTR)
}
china.hk = {
// Format is the same as above
};
}
The above is the encapsulation of the prepared map path information to the () function, and save the file name is chinamAppath.js for later calls.
Html
First load the Raphael.js library file and the chinamAppath.js path information file in the head.
Copy code code as follows:
<script type = "text/javascript" src = "raphael.js"> </script>
<script type = "text/javascript" src = "chinamAppath.js"> </script>
Then place the div#Map in the body.
Copy code code as follows:
<div ID = "MAP"> </DIV>
Javascript
First of all, we call the map on the page, the method is as follows:
Copy code code as follows:
window.onload = function () {
// Draw a map
VAR R = Raphael ("Map", 600, 500); // Load the map into a div with an ID, and set the area of 600x500px.
paintmap (r);
}
At this time, we will use the browser to open the map. Next, we want to add the province's name to the corresponding province area in the map, and the color change animation effect when the mouse slides towards each province.
Copy code code as follows:
window.onload = function () {
var r = raphael ("map", 600, 500);
// Call the drawing map method
paintmap (r);
var textattr = {
"Fill": "#000",
"font-size": "12px",
"Cursor": "Pointer"
};
for (var state in china) {
china [state] ['path']. COLOR = raphael.getcolor (0.9);
(Function (st, state) {
// Get the central coordinates of the current graphic
var xx = st.getbbox (). x + (st.getbbox (). width / 2);
var yy = st.getbbox (). y + (st.getbbox (). Height / 2);
// Write the text
china [state] ['text'] = r.text (xx, yy, china [state] ['name']). Attr (textattr);
st [0] .onmouseover = Function () {// Mouse slip
St.animate ({Fill: St.Color, Stroke: "#eee"}, 500);
china [state] ['text']. TOFRORONT ();
R.safari ();
};
st [0] .onmouseout = Function () {// Mouse leave
St.animate ({Fill: "#97d6F5", Stroke: "#eee"}, 500);
china [state] ['text']. TOFRORONT ();
R.safari ();
};
}) (Chinese [state] ['path'], state);
}
}
The above code uses the methods provided by Raphael: Getcolor, Getbbox, Animate, TOFRONT, etc. These can be found in the Raphael document. This article is not described in this article.
In addition, due to the size of the map, the display position of some province names in the map is not appropriate, and the offset needs to be corrected, so that it looks comfortable.
Copy code code as follows:
window.onload = function () {
var r = raphael ("map", 600, 500);
Elastic
for (var state in china) {
Elastic
(Function (st, state) {
... ...
switch (china [state] ['name']) {
Case "Jiangsu":
xx += 5;
yy -= 10;
Break;
Case "Hebei":
xx- = 10;
yy += 20;
Break;
Case "Tianjin":
xx += 10;
yy += 10;
Break;
case "Shanghai":
xx += 10;
Break;
case "Guangdong":
yy -= 10;
Break;
case "Macau":
yy += 10;
Break;
case "Hong Kong":
xx += 20;
yy += 5;
Break;
Case "Gansu":
xx -= 40;
yy -= 30;
Break;
case "Shaanxi":
xx += 5;
yy += 10;
Break;
Case "Inner Mongolia":
xx- = 15;
yy += 65;
Break;
DEFAULT:
}
Elastic
}) (Chinese [state] ['path'], state);
}
}