Les projets de statistiques de données récents doivent être utilisés pour les cartes chinoises, c'est-à-dire afficher dynamiquement des statistiques dans une province et une région sur la carte. la carte. Dans cet article, je partagerai avec vous comment utiliser JS pour terminer l'interaction MAP.
Présentez brièvement Raphael.js. De plus, Raphael.js est également compatible avec les navigateurs et est également compatible avec les vieilles dents IE6. Adresse du site officiel de Raphael.js: http://raphaeljs.com/
Préparation
Nous devons préparer une carte vectorielle, trouver une carte vectorielle à partir d'Internet ou utiliser illustrator pour dessiner une carte vectorielle, puis exporter des fichiers au format SVG. . Et préparer les informations du chemin de la carte dans le format des informations de chemin de chemin dans le format de chinamappath.js.
Copier le code du code comme suit:
Var China = [];
fonction peinturemap (r) {
var attr = {{
"Remplir": "# 97d6f5",
"Stroke": "#ee",
"largeur de course": 1,
"TRAD-LineJoin": "Round"
};
Chine.aomen = {
Nom: "Macao",
Chemin: R.Path ("M413.032, ....................................... ..... 414.183Z "). Att (att)
}
Chine.hk = {
// Le format est le même que ci-dessus
};
}
Ce qui précède est l'encapsulation des informations de chemin de carte préparées vers la fonction (), et enregistrer le nom de fichier est chinamappath.js pour les appels ultérieurs.
Html
Chargez d'abord le fichier de bibliothèque Raphael.js et le fichier d'informations sur le chemin chinamappath.js dans la tête.
Copier le code du code comme suit:
<script type = "text / javascript" src = "Raphael.js"> </ script>
<script type = "text / javascript" src = "chinamappath.js"> </ script>
Placez ensuite la carte Div # dans le corps.
Copier le code du code comme suit:
<div id = "map"> </ div>
Javascrip
Tout d'abord, nous appelons la carte sur la page, la méthode est la suivante:
Copier le code du code comme suit:
window.onload = function () {
// dessine une carte
Var r = Raphael ("map", 600, 500);
peinturemap (r);
}
Pour le moment, nous utiliserons le navigateur pour ouvrir la carte. Ensuite, nous voulons ajouter le nom de la province à la zone de la province correspondante de la carte et l'effet d'animation de couleur lorsque la souris glisse vers chaque province.
Copier le code du code comme suit:
window.onload = function () {
var r = Raphael ("map", 600, 500);
// appelle la méthode de la carte de dessin
peinturemap (r);
var textAttr = {
"Remplir": "# 000",
"Font-Size": "12px",
"Curseur": "pointeur"
};
pour (État var en Chine) {
Chine [État] [«Path»].
(Fonction (st, état) {
// Obtenez les coordonnées centrales du graphique actuel
var xx = St.GetBbox ().
var yy = St.GetBbox ().
// Écrivez le texte
Chine [État] [«Texte»] = R.Text (XX, YY, Chine [État] [«Nom»]).
st [0] .onMouseOver = function () {// Slip de la souris
St.Animate ({Fill: St.Color, AVC: "#eee"}, 500);
Chine [État] [«texte»].
R.Safari ();
};
st [0] .onMouseout = function () {// congé de souris
St.Animate ({Fill: "# 97D6F5", trait: "#eee"}, 500);
Chine [État] [«texte»].
R.Safari ();
};
}) (Chinois [état] ['path'], état);
}
}
Le code ci-dessus utilise les méthodes fournies par Raphael: GetColor, GetBbox, Animate, Tofront, etc. Celles-ci peuvent être trouvées dans le document Raphaël.
De plus, en raison de la taille de la carte, la position d'affichage de certains noms de province dans la carte n'est pas appropriée et le décalage doit être corrigé, de sorte qu'il semble confortable.
Copier le code du code comme suit:
window.onload = function () {
var r = Raphael ("map", 600, 500);
Élastique
pour (État var en Chine) {
Élastique
(Fonction (st, état) {
... ...
Switch (Chine [État] ['name']) {
Cas "Jiangsu":
xx + = 5;
yy - = 10;
Casser;
Cas "Hebei":
xx- = 10;
yy + = 20;
Casser;
Cas "Tianjin":
xx + = 10;
yy + = 10;
Casser;
cas "Shanghai":
xx + = 10;
Casser;
cas "Guangdong":
yy - = 10;
Casser;
cas "Macao":
yy + = 10;
Casser;
cas "Hong Kong":
xx + = 20;
yy + = 5;
Casser;
Cas "gansu":
xx - = 40;
yy - = 30;
Casser;
cas "shaanxi":
xx + = 5;
yy + = 10;
Casser;
Cas "Mongolie intérieure":
xx- = 15;
yy + = 65;
Casser;
DÉFAUT:
}
Élastique
}) (Chinois [état] ['path'], état);
}
}