يجب استخدام مشاريع إحصائيات البيانات الحديثة للخرائط الصينية ، أي إحصائيات ديناميكي في المقاطعة والمنطقة على الخريطة. الخريطة. في هذه المقالة ، سوف أشارككم كيفية استخدام JS لإكمال تفاعل الخريطة.
دعنا نقدم باختصار Raphael.js. بالإضافة إلى ذلك ، فإن Raphael.js متوافق أيضًا مع المتصفحات ، كما أنه متوافق مع الأسنان القديمة IE6. عنوان الموقع الرسمي لـ Raphael.js: http://raphaeljs.com/
تحضير
نحتاج إلى إعداد خريطة متجه ، أو العثور على خريطة متجه من الإنترنت ، أو استخدام المصور لرسم خريطة متجه ، ثم تصدير الملفات بتنسيق SVG. (إحداثيات تبدأ من م). وإعداد معلومات مسار الخريطة بتنسيق معلومات مسار المسار بتنسيق chinamappath.js.
نسخ رمز رمز على النحو التالي:
var China = [] ؛
وظيفة paintmap (r) {
var attr = {{
"ملء": "#97d6f5" ،
"السكتة الدماغية": "#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 = "map"> </iv>
جافا سكريبت
بادئ ذي بدء ، نسمي الخريطة على الصفحة ، الطريقة هي كما يلي:
نسخ رمز رمز على النحو التالي:
window.onload = function () {
// ارسم خريطة
var r = Raphael ("MAP" ، 600 ، 500) ؛
PaintMap (R) ؛
}
في هذا الوقت ، سوف نستخدم المتصفح لفتح الخريطة. بعد ذلك ، نريد أن نضيف اسم المقاطعة إلى منطقة المقاطعة المقابلة في الخريطة ، وتغيير تغيير الرسوم المتحركة عندما ينزلق الماوس نحو كل مقاطعة.
نسخ رمز رمز على النحو التالي:
window.onload = function () {
var r = Raphael ("MAP" ، 600 ، 500) ؛
// استدعاء طريقة خريطة الرسم
PaintMap (R) ؛
var textattr = {
"ملء": "#000" ،
"حجم الخط": "12px" ،
"المؤشر": "المؤشر"
} ؛
لـ (Var State in China) {
الصين [الدولة] [مسار ".
(الوظيفة (ST ، State) {
// احصل على الإحداثيات المركزية للرسم الحالي
var xx = St.GetBbox ().
var yy = St.GetBbox ().
// اكتب النص
الصين [الدولة] [النص "] = R.Text (XX ، YY ، الصين [الدولة] [" الاسم ").
ST [0] .onmouseover = function () {// mouse slip
St.Animate ({fill: St.Color ، Stroke: "#EEE"} ، 500) ؛
الصين [الدولة]
R.Safari () ؛
} ؛
ST [0] .onmouseout = function () {// mouse earn
St.Animate ({fill: "#97d6f5" ، stroke: "#EEE"} ، 500) ؛
الصين [الدولة]
R.Safari () ؛
} ؛
}) (الصينية [الدولة] ['path'] ، الدولة) ؛
}
}
يستخدم الرمز أعلاه الطرق التي يوفرها Raphael: GetColor ، GetBbox ، Animate ، Tofront ، وما إلى ذلك. يمكن العثور عليها في وثيقة Raphael.
بالإضافة إلى ذلك ، نظرًا لحجم الخريطة ، فإن موضع عرض بعض أسماء المقاطعات في الخريطة غير مناسب ، ويجب تصحيح الإزاحة ، بحيث تبدو مريحة.
نسخ رمز رمز على النحو التالي:
window.onload = function () {
var r = Raphael ("MAP" ، 600 ، 500) ؛
مرنة
لـ (Var State in China) {
مرنة
(الوظيفة (ST ، State) {
... ...
التبديل (الصين [الدولة] ['name']) {
حالة "Jiangsu":
xx += 5 ؛
yy -= 10 ؛
استراحة؛
حالة "hebei":
xx- = 10 ؛
yy += 20 ؛
استراحة؛
حالة "تيانجين":
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 ؛
استراحة؛
تقصير:
}
مرنة
}) (الصينية [الدولة] ['path'] ، الدولة) ؛
}
}