Proyek statistik data terbaru perlu digunakan untuk peta Cina, yaitu, secara dinamis menampilkan statistik di provinsi dan wilayah di peta. Peta. Dalam artikel ini, saya akan berbagi dengan Anda cara menggunakan JS untuk menyelesaikan interaksi peta.
Mari kita perkenalkan Raphael.js. Selain itu, Raphael.js juga kompatibel dengan browser, dan juga kompatibel dengan gigi tua IE6. Alamat situs web resmi Raphael.js: http://raphaeljs.com/
Persiapan
Kita perlu menyiapkan peta vektor, menemukan peta vektor dari internet, atau menggunakan ilustrator untuk menggambar peta vektor, dan kemudian mengekspor file dalam format SVG. (Koordinat mulai dari m). Dan siapkan informasi jalur peta dalam format informasi jalur jalur dalam format chinamappath.js.
Salin kode kode sebagai berikut:
var cina = [];
function paintmap (r) {
var attr = {{
"Isi": "#97d6f5",
"Stroke": "#ee",
"Stroke-Width": 1,
"Stroke-LineKinjoin": "Round"
};
cina.aomen = {
Nama: "Makau",
Jalur: R.Path ("M413.032, ....................................... ..... 414.183z "). Attr (attr)
}
cina.hk = {
// Formatnya sama seperti di atas
};
}
Di atas adalah enkapsulasi informasi jalur peta yang disiapkan ke fungsi (), dan menyimpan nama file adalah chinamappath.js untuk panggilan selanjutnya.
Html
Pertama memuat file pustaka raphael.js dan file informasi jalur chinamappath.js di kepala.
Salin kode kode sebagai berikut:
<script type = "text/javascript" src = "raphael.js"> </ptript>
<script type = "text/javascript" src = "chinamappath.js"> </ptript>
Kemudian tempatkan peta div#di dalam tubuh.
Salin kode kode sebagai berikut:
<div id = "peta"> </div>
Javascript
Pertama -tama, kami memanggil peta di halaman, metode ini adalah sebagai berikut:
Salin kode kode sebagai berikut:
window.onload = function () {
// gambar peta
Var r = raphael ("peta", 600, 500);
Paintmap (R);
}
Pada saat ini, kami akan menggunakan browser untuk membuka peta. Selanjutnya, kami ingin menambahkan nama provinsi ke area provinsi yang sesuai di peta, dan efek animasi perubahan warna ketika mouse meluncur ke arah setiap provinsi.
Salin kode kode sebagai berikut:
window.onload = function () {
var r = raphael ("peta", 600, 500);
// Panggil metode peta gambar
Paintmap (R);
var textAttr = {
"Isi": "#000",
"font-size": "12px",
"Kursor": "Pointer"
};
untuk (negara bagian var di Cina) {
China [negara bagian] ['Path'].
(Function (st state) {
// Dapatkan koordinat pusat dari grafik saat ini
var xx = st.getbbox ().
var yy = st.getbbox ().
// tulis teksnya
China [Negara] ['Teks'] = R.Text (xx, YY, Cina [Negara] ['Nama']).
ST [0] .onmouseOver = function () {// slip mouse
St.animate ({Fill: St.Color, Stroke: "#EEE"}, 500);
China [Negara] ['Teks'].
R.safari ();
};
ST [0] .onmouseout = function () {// cuti mouse
St.animate ({Fill: "#97d6f5", stroke: "#eee"}, 500);
China [Negara] ['Teks'].
R.safari ();
};
}) (Cina [negara bagian] ['path'], state);
}
}
Kode di atas menggunakan metode yang disediakan oleh Raphael: GetColor, GetBbox, Animate, Tofront, dll. Ini dapat ditemukan dalam dokumen Raphael.
Selain itu, karena ukuran peta, posisi tampilan beberapa nama provinsi di peta tidak sesuai, dan offset perlu diperbaiki, sehingga terlihat nyaman.
Salin kode kode sebagai berikut:
window.onload = function () {
var r = raphael ("peta", 600, 500);
Elastis
untuk (negara bagian var di Cina) {
Elastis
(Function (st state) {
... ...
sakelar (cina [negara bagian] ['name']) {
Kasus "Jiangsu":
xx += 5;
yy -= 10;
Merusak;
Kasus "hebei":
xx- = 10;
yy += 20;
Merusak;
Kasus "tianjin":
xx += 10;
yy += 10;
Merusak;
Kasus "Shanghai":
xx += 10;
Merusak;
kasus "guangdong":
yy -= 10;
Merusak;
kasus "macau":
yy += 10;
Merusak;
Kasus "Hong Kong":
xx += 20;
yy += 5;
Merusak;
Kasus "gansu":
xx -= 40;
YY -= 30;
Merusak;
kasus "shaanxi":
xx += 5;
yy += 10;
Merusak;
Kasus "Mongolia Dalam":
xx- = 15;
yy += 65;
Merusak;
BAWAAN:
}
Elastis
}) (Cina [negara bagian] ['path'], state);
}
}