โครงการสถิติข้อมูลล่าสุดจำเป็นต้องใช้สำหรับแผนที่จีนนั่นคือแสดงสถิติแบบไดนามิกในจังหวัดและภูมิภาคบนแผนที่ แผนที่ ในบทความนี้ฉันจะแบ่งปันวิธีการใช้ JS เพื่อให้คุณเสร็จสิ้นการโต้ตอบแผนที่
มาแนะนำ Raphael.js สั้น ๆ นอกจากนี้ raphael.js ยังเข้ากันได้กับเบราว์เซอร์และยังเข้ากันได้กับฟันเก่าเช่น 6 ที่อยู่เว็บไซต์อย่างเป็นทางการของ raphael.js: http://raphaeljs.com/
การตระเตรียม
เราจำเป็นต้องเตรียมแผนที่เวกเตอร์ค้นหาแผนที่เวกเตอร์จากอินเทอร์เน็ตหรือใช้ Illustrator เพื่อวาดแผนที่เวกเตอร์จากนั้นส่งออกไฟล์ในรูปแบบ SVG . (พิกัดเริ่มต้นจาก m) และเตรียมข้อมูลเส้นทางแผนที่ในรูปแบบของข้อมูลเส้นทางพา ธ ในรูปแบบของ chinamappath.js
คัดลอกรหัสรหัสดังนี้:
var China = [];
ฟังก์ชั่น paintmap (r) {
var attr = {{
"เติม": "#97D6F5"
"Stroke": "#ee",
"จังหวะความกว้าง": 1,
"Stroke-Linejoin": "Round"
-
China.aomen = {
ชื่อ: "มาเก๊า",
เส้นทาง: R.Path ("M413.032, ........................................... ..... 414.183z "). attr (attr)
-
china.hk = {
// รูปแบบเหมือนกับด้านบน
-
-
ด้านบนคือการห่อหุ้มข้อมูลเส้นทางแผนที่ที่เตรียมไว้ไปยังฟังก์ชัน () และบันทึกชื่อไฟล์คือ chinamappath.js สำหรับการโทรในภายหลัง
HTML
โหลดไฟล์ไลบรารี raphael.js ก่อนและไฟล์ข้อมูลพา ธ ของ Chinamappath.js ในหัว
คัดลอกรหัสรหัสดังนี้:
<script type = "text/javascript" src = "raphael.js"> </script>
<script type = "text/javascript" src = "chinamappath.js"> </script>
จากนั้นวางแผนที่ div#ในร่างกาย
คัดลอกรหัสรหัสดังนี้:
<div id = "แผนที่"> </div>
จาวาสคริปต์
ก่อนอื่นเราเรียกแผนที่บนหน้าวิธีนี้มีดังนี้:
คัดลอกรหัสรหัสดังนี้:
window.onload = function () {
// วาดแผนที่
var r = raphael ("แผนที่", 600, 500);
Paintmap (R);
-
ในเวลานี้เราจะใช้เบราว์เซอร์เพื่อเปิดแผนที่ ต่อไปเราต้องการเพิ่มชื่อของจังหวัดในพื้นที่จังหวัดที่เกี่ยวข้องในแผนที่และเอฟเฟกต์ภาพเคลื่อนไหวเปลี่ยนสีเมื่อเมาส์เลื่อนไปทางแต่ละจังหวัด
คัดลอกรหัสรหัสดังนี้:
window.onload = function () {
var r = raphael ("แผนที่", 600, 500);
// โทรหาวิธีการวาดแผนที่
Paintmap (R);
var textattr = {
"เติม": "#000"
"Font-Size": "12px",
"เคอร์เซอร์": "ตัวชี้"
-
สำหรับ (Var State ในประเทศจีน) {
จีน [รัฐ] ['เส้นทาง']
(ฟังก์ชั่น (st, state) {
// รับพิกัดกลางของกราฟิกปัจจุบัน
var xx = st.getbbox ()
var yy = st.getbbox ()
// เขียนข้อความ
จีน [รัฐ] ['text'] = r.text (xx, yy, จีน [รัฐ] ['ชื่อ'])
st [0] .onmouseover = function () {// mouse slip
St.Animate ({Fill: St.Color, Stroke: "#EEE"}, 500);
จีน [รัฐ] ['ข้อความ']
R.Safari ();
-
st [0] .onmouseout = function () {// เมาส์ออกไป
St.Animate ({Fill: "#97D6F5", Stroke: "#EEE"}, 500);
จีน [รัฐ] ['ข้อความ']
R.Safari ();
-
}) (จีน [รัฐ] ['เส้นทาง'], รัฐ);
-
-
รหัสข้างต้นใช้วิธีการที่ Raphael ให้ไว้: GetColor, GetBbox, Animate, Tofront ฯลฯ สิ่งเหล่านี้สามารถพบได้ในเอกสาร Raphael
นอกจากนี้เนื่องจากขนาดของแผนที่ตำแหน่งการแสดงผลของชื่อจังหวัดบางชื่อในแผนที่ไม่เหมาะสมและจะต้องแก้ไขการชดเชยเพื่อให้ดูสะดวกสบาย
คัดลอกรหัสรหัสดังนี้:
window.onload = function () {
var r = raphael ("แผนที่", 600, 500);
ยืดหยุ่น
สำหรับ (Var State ในประเทศจีน) {
ยืดหยุ่น
(ฟังก์ชั่น (st, state) {
-
สวิตช์ (จีน [รัฐ] ['ชื่อ']) {
กรณี "เจียงซู":
xx += 5;
yy -= 10;
หยุดพัก;
กรณี "Hebei":
xx- = 10;
yy += 20;
หยุดพัก;
กรณี "Tianjin":
xx += 10;
yy += 10;
หยุดพัก;
กรณี "เซี่ยงไฮ้":
xx += 10;
หยุดพัก;
กรณี "กวางตุ้ง":
yy -= 10;
หยุดพัก;
กรณี "มาเก๊า":
yy += 10;
หยุดพัก;
กรณี "ฮ่องกง":
xx += 20;
yy += 5;
หยุดพัก;
กรณี "Gansu":
xx -= 40;
yy -= 30;
หยุดพัก;
กรณี "Shaanxi":
xx += 5;
yy += 10;
หยุดพัก;
กรณี "ชั้นในมองโกเลีย":
xx- = 15;
yy += 65;
หยุดพัก;
ค่าเริ่มต้น:
-
ยืดหยุ่น
}) (จีน [รัฐ] ['เส้นทาง'], รัฐ);
-
-