Die jüngsten Datenstatistikprojekte müssen für chinesische Karten verwendet werden, dh Statistiken in einer Provinz und Region auf der Karte. Die Karte. In diesem Artikel werde ich Ihnen mitteilen, wie Sie JS verwenden, um die Karteninteraktion abzuschließen.
Führen Sie Raphael.js kurz vor. Darüber hinaus ist Raphael.js auch mit Browsern kompatibel und auch mit alten Zähnen IE6 kompatibel. Offizielle Website von Raphael.js: http://raphaeljs.com/
Vorbereitung
Wir müssen eine Vektorkarte vorbereiten, eine Vektorkarte aus dem Internet suchen oder mit Illustrator eine Vektorkarte zeichnen und dann Dateien im SVG -Format exportieren. . (Koordinaten aus M). Und bereiten Sie die Kartenpfadinformationen im Format der Pfadpfadinformationen im Format von Chinamappath.js vor.
Kopieren Sie den Code -Code wie folgt:
var China = [];
Funktion paintmap (r) {
var attr = {{{
"Füllung": "#97d6f5",
"Schlaganfall": "#ee",
"Schlaganfall-Breite": 1,,
"Stroke-Linejoin": "Round"
};
China.Aomen = {{
Name: "Macau",
Pfad: R.Path ("M413.032, ....................................... ..... 414.183z "). Attr (Attr)
}
China.hk = {
// Format ist das gleiche wie oben
};
}
Das obige ist die Kapselung der vorbereiteten Kartenpfadinformationen in die () -Funktion () und speichern Sie den Dateinamen für spätere Anrufe.
Html
Laden Sie zuerst die Datei raphael.js Library -Datei und die Datei ChinaMappath.js Path Information In The Head.
Kopieren Sie den Code -Code wie folgt:
<script type = "text/javaScript" src = "raphael.js"> </script>
<script type = "text/javaScript" src = "chinamappath.js"> </script>
Dann legen Sie die Div#-Map in den Körper.
Kopieren Sie den Code -Code wie folgt:
<div id = "map"> </div>
JavaScript
Zunächst rufen wir die Karte auf der Seite auf, die Methode lautet wie folgt:
Kopieren Sie den Code -Code wie folgt:
window.onload = function () {
// eine Karte zeichnen
Var r = raphael ("map", 600, 500);
PaintMap (R);
}
Zu diesem Zeitpunkt werden wir den Browser verwenden, um die Karte zu öffnen. Als nächstes möchten wir den Namen der Provinz dem entsprechenden Provinzgebiet in der Karte und den Animationseffekt der Farbänderung hinzufügen, wenn die Maus in Richtung jeder Provinz gleitet.
Kopieren Sie den Code -Code wie folgt:
window.onload = function () {
var r = raphael ("map", 600, 500);
// Rufen Sie die Zeichnungskartenmethode auf
PaintMap (R);
var TextTtr = {
"Füllung": "#000",
"Schriftgröße": "12px",
"Cursor": "Zeiger"
};
für (var State in China) {
China [Staat] ['Path'].
(Funktion (ST, Zustand) {
// Erhalten Sie die zentralen Koordinaten der aktuellen Grafik
var xx = st.getbbox ().
var yy = St.GetBbox ().
// den Text schreiben
China [Staat] ['Text'] = R.Text (xx, yy, China [Staat] ['Name']).
ST [0] .onmouseover = function () {// Mausschlage
St.Animate ({Fill: St.Color, Schlaganfall: "#eee"}, 500);
China [Staat] ['Text'].
R.Safari ();
};
ST [0] .onmouseout = function () {// Mausurlaub
St.Animate ({fill: "#97d6f5", Schlaganfall: "#eee"}, 500);
China [Staat] ['Text'].
R.Safari ();
};
}) (Chinesisch [Staat] ['Path'], Staat);
}
}
Der obige Code verwendet die von Raphael bereitgestellten Methoden: GetColor, GetBbox, Animate, Tofront usw. Diese finden Sie im Raphael -Dokument.
Aufgrund der Größe der Karte ist die Anzeigeposition einiger Provinznamen in der Karte nicht angemessen, und der Offset muss korrigiert werden, damit es bequem aussieht.
Kopieren Sie den Code -Code wie folgt:
window.onload = function () {
var r = raphael ("map", 600, 500);
Elastisch
für (var State in China) {
Elastisch
(Funktion (ST, Zustand) {
... ...
Switch (China [Staat] ['Name']) {
Fall "Jiangsu":
xx += 5;
yy -= 10;
Brechen;
Fall "Hebei":
xx- = 10;
yy += 20;
Brechen;
Fall "Tianjin":
xx += 10;
yy += 10;
Brechen;
Fall "Shanghai":
xx += 10;
Brechen;
Fall "Guangdong":
yy -= 10;
Brechen;
Fall "Macau":
yy += 10;
Brechen;
Fall "Hongkong":
xx += 20;
yy += 5;
Brechen;
Fall "Gansu":
xx -= 40;
yy -= 30;
Brechen;
Fall "Shaanxi":
xx += 5;
yy += 10;
Brechen;
Fall "innere Mongolei":
xx- = 15;
yy += 65;
Brechen;
STANDARD:
}
Elastisch
}) (Chinesisch [Staat] ['Path'], Staat);
}
}