Raphael. js: Drawing map of China _ javascript skills

This article will share with you how to use raphael. js to complete map interaction, raphael. javascript is a small javascript library that allows you to draw various vector graphs, charts, image cropping, rotation, motion animation, and other functions on a webpage, if you need a map of China, you can refer to the latest data statistics project to use the map of China, that is, dynamically display the statistics of a province or region in a certain period of time on the map. We do not need flash, rely solely on raphael. javaScript and SVG images can complete map interaction. In this article, I will share with you how to use js to complete map interaction.

First, we will briefly introduce raphael. js, raphael. javascript is a small javascript library that allows you to draw various vector graphs, charts, image cropping, rotation, motion animation, and other functions on a webpage. In addition, raphael. js is compatible with other browsers and ie6. Raphael. js official website address: http://raphaeljs.com/

Preparations

We need to prepare a vector map. We can find a vector map from the Internet, or use illustrator to draw a vector map and export it as a file in SVG format. This file can be opened in a browser, then extract the path information (coordinates starting with M ). Prepare the path information in chinamapPath. js format.

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: "Macao ",
Path: R. path ("M413.032,... omitted a number...). attr (attr)
}
China.hk = {
// The same format as above
};
}

The preceding Code encapsulates the prepared map path information in the () function and saves the file name chinamapPath. js for future calls.

HTML

First, load the raphael. js library file and the chinamapPath. js path file in the head section.

The Code is as follows: