Raphael. js: Drawing map of China _ javascript skills

Source: Internet
Author: User
Tags getcolor
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:


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.