عندما كنت أبحث عن الإلهام على الخرائط الإلكترونية قبل يومين، رأيت العديد من الأمثلة المشابهة للخرائط وتحديد المواقع وما إلى ذلك، ولكن يبدو أنه لا توجد خريطة لمترو الأنفاق، لذلك أمضيت بعض الوقت في تعديل هذا العرض التوضيحي لخريطة مترو الأنفاق التفاعلية تم تنزيل النقاط الموجودة على خط مترو الأنفاق بشكل عشوائي من الإنترنت. تسجل هذه المقالة بعض مكاسبي (بعد كل شيء، ما زلت مبتدئًا) وتنفيذ الكود، وآمل أن يساعد ذلك بعض الأصدقاء. بالطبع، إذا كان لديك أي آراء، يمكنك إخباري مباشرة فقط من خلال التواصل معًا يمكننا إحراز تقدم.
الاداءات
http://www.hightopo.com/demo/subway/index.html
تحتوي الخريطة على قدر كبير جدًا من المحتوى إذا كنت تريد عرضها كلها، فستظهر الخطوط صغيرة بعض الشيء، لكن لا يهم، يمكنك التكبير أو التصغير حسب الحاجة، ولن يتم تشويه الخطوط والمحتوى المرسوم بعد كل شيء، تم رسمهم جميعًا باستخدام المتجهات ~
توليد الواجهةيتم إنشاء div الأساسي من خلال مكون ht.graph.GraphView ثم يمكنك استخدام الطرق الجيدة التي يوفرها HT للويب واستدعاء فرشاة القماش للرسم بشكل عرضي، فلنرى أولاً كيفية إنشاء div الأساسي:
var dm = new ht.DataModel();// حاوية البيانات var gv = new ht.graph.GraphView(dm);// مكون الطوبولوجيا gv.addToDOM();// أضف مكون الرسم البياني للطوبولوجيا إلى النص
يتم تعريف الدالة addToDOM على النحو التالي:
addToDOM = function(){ var self = this, view = self.getView(), style = view.style document.body.appendChild(view); // أضف القسم الأساسي للمكون إلى الجسم style.left = '0';// تم تحديد موضع المكون الافتراضي تمامًا، لذا قم بتعيين الموضع style.right = '0'; style.top = '0'; window.addEventListener('resize', function () { self.iv(); }, false); // حدث تغيير النافذة}الآن يمكنني الرسم على هذا القسم ~ أولاً، أحصل على النقاط الموجودة على خريطة مترو الأنفاق التي تم تنزيلها، وأضعها في ملف subway.js هذا هو كل المحتوى الذي تم تنزيله، ولم أفعل أي شيء آخر التغييرات هي أساسًا إضافة هذه يشير إلى المصفوفة وفقًا للخط، مثل:
mark_Point13 = [];// تحتوي مصفوفة الخط على إحداثيات البداية والنهاية للخط واسم الخط t_Point13 = [];// تحتوي مصفوفة المحطة على إحداثيات محطة النقل في الخط واسم المحطة n_Point13 = [ ];// تحتوي مصفوفة المحطات الصغيرة على إحداثيات المحطات الصغيرة على الخط وأسماء المحطات الصغيرة mark_Point13.push({ name: 'Line 13', value: [113.4973,23.1095]}); mark_Point13.push({ الاسم: 'السطر 13'، القيمة: [113.4155,23.1080]}); t_Point13.push({ name: 'Yu Zhu'، القيمة: [113.41548,23.10547 ]} );n_Point13.push({ الاسم: 'Yufengwei'، القيمة: [113.41548,23.10004]});بعد ذلك، لرسم خطوط مترو الأنفاق، أعلنت عن مصفوفة lineNum للاحتفاظ بأرقام جميع خطوط المترو في js، ومصفوفة ألوان للاحتفاظ بألوان جميع خطوط المترو، ففهرس هذه الألوان هو نفس مؤشر المترو سطر في lineNum الفهارس المرقمة تتوافق مع واحد:
فار سطرNum = ['1', '2', '3', '30', '4', '5', '6', '7', '8', '9', '13', '14 ', '32', '18', '21', '22', '60', '68'];var color = ['#f1cd44', '#0060a1', '#ed9b4f'، '#ed9b4f'، '#007e3a'، '#cb0447'، '#7a1a57'، '#18472c'، '#008193'، '#83c39e'، '#8a8c29'، '#82352b'، '#82352b'، '#09a1e0'، '#8a8c29'، '#82352b'، '#b6d300'، '#09a1e0']؛
ثم اجتياز lineNum، وتمرير العناصر والألوان في lineNum إلى وظيفة createLine، ورسم خطوط مترو الأنفاق ومطابقة الألوان وفقًا لهاتين المعلمتين، بعد كل شيء، طريقة التسمية في ملف js عادية أيضًا الرقم المقابل، لذلك نحتاج فقط إلى دمج السلسلة مع هذا الرقم للحصول على المصفوفة المقابلة في js:
Let lineName = 'Line' + num; Let line = window[lineName]; تعريف createLine بسيط جدًا أيضًا. لإنشاء خط أنابيب ht.Polyline، يمكننا إضافة نقاط محددة إلى هذا المتغير من خلال وظيفة polyline.addPoint()، وتعيين طريقة اتصال النقاط من خلال setSegments. وظيفة createLine(num, color) {// ارسم خط خريطة var polyline = new ht.Polyline();// خط أنابيب المضلع polyline.setTag(num);// قم بتعيين تسمية علامة العقدة كتسمية وحيدة if(num = == '68') polyline.setToolTip('AP M');// تعيين معلومات سريعة else if(num === '60') polyline.setToolTip('G F'); polyline.setToolTip('Line' + num); if(color) { polyline.s({//s هو اختصار لـ setStyle، قم بتعيين النمط 'shape.border.width': 0.4,// قم بتعيين عرض الحدود لـ المضلع 'الشكل .border.color': اللون،// اضبط لون حدود المضلع 'select.width': 0.2,// اضبط عرض حدود العقدة المحددة'select.color': color// اضبط لون حدود العقدة المحددة}); } Let lineName = 'Line' + num; for(let i = 0; i < line.length; i++) { for(let j = 0; j < line[i].coords.length; j++) { polyline.addPoint({x: line[i].coords[j][0]*300, y: -line[i].coords[j][1]*300}); if(num === '68'){// APM line (هناك نقطتان، لكن النقاط في نفس المصفوفة) if(i === 0 && j === 0) { polyline.setSegments([1] } else if(i === 1 && j === 0) { polyline.getSegments().push(1); } else { polyline.getSegments().push(2); في الطبقة السفلية، يتم تعيين النقطة على الطبقة العليا dm.add(polyline);// أضف خط الأنابيب إلى حاوية البيانات للتخزين، وإلا فسيكون خط الأنابيب في حالة حرة ولن يتم عرضه على خريطة الهيكل return polyline;}هناك عدة حالات لإضافة نقاط على خط مترو الأنفاق في الكود أعلاه وذلك لأن Line68 لديه نقطة انتقال عند تعيين الخط في js، لذلك يجب أن نقفز إليه للإعلان المحدد عن Line68 المصفوفة، راجع subway.js .
شيء واحد يجب ملاحظته هنا هو أنه إذا كنت تستخدم وظيفة addPoint ولم تقم بتعيين المقاطع، فسيتم ربط النقاط المضافة بخطوط مستقيمة بشكل افتراضي. تعريف المقاطع هو كما يلي:
1: moveTo، يحتل معلومات نقطة واحدة، تمثل نقطة البداية لمسار جديد
2: lineTo، يحتل معلومات نقطة واحدة، تمثل الاتصال من النقطة الأخيرة إلى هذه النقطة
3: QuadraticCurveTo، يحتل معلومات نقطتين، ويتم استخدام النقطة الأولى كنقطة تحكم في المنحنى، ويتم استخدام النقطة الثانية كنقطة نهاية المنحنى
4: bezierCurveTo، يحتل معلومات 3 نقاط، ويتم استخدام النقطتين الأولى والثانية كنقاط تحكم في المنحنى، ويتم استخدام النقطة الثالثة كنقطة نهاية المنحنى
5: ClosePath، لا يشغل معلومات النقطة، ويمثل نهاية رسم المسار هذا ويغلق عند نقطة بداية المسار
لذا، إذا أردنا القيام بسلوك القفز، فما عليك سوى تعيين المقاطع على 1.
أخيرًا، يتم رسم هذه النقاط على خط مترو الأنفاق أيضًا في subway.js، وتبدأ الأسماء بـ mark_Point وt_Point وn_Point التي شرحتها في جزء عرض js السابق حتى نرى نظرة.
نضيف عقد ht.Node في هذه النقاط، عند إضافة العقد إلى حاوية بيانات dm، سيتم عرضها على خريطة الطوبولوجيا. بالطبع، الفرضية هي أن حاوية البيانات التي تم تعيينها بواسطة مكون خريطة الطوبولوجيا gv هي هذه dm . نظرًا لضيق المساحة، سأعرض فقط جزء الكود الخاص بإضافة النقاط على خط مترو الأنفاق:
var tName = 't_Point' + num;var tP = window[tName];// محطة كبيرة if(tP) {// لا تحتوي بعض الخطوط على محطات نقل for(let i = 0; i < tP.length; i++) { دع العقدة = createNode(tP[i].name, tP[i].value, color[index]);// إضافة العقدةnode.s({// تعيين نمط نمط العقدة 'label.scale': 0.05،//تحجيم النص لتجنب قيود المتصفح، الحد الأدنى لحجم الخطمشكلة'label.font': ' غامق 12 بكسل أرييل، sans-serif'// قم بتعيين خط النص }); نظرًا لأن الإزاحة بين كل نقطة في js صغيرة جدًا، فقد اضطررت إلى تعيين العقدة بشكل أصغر. رغب (150، 150، 150)'); // سمة attr، يمكنك تعيين أي شيء هنا. AlarmColor1 هي السمة المرتبطة بمجموعة الصور أعلاه للحصول على التفاصيل، يرجى الرجوع إلى HT لدليل Web Vector (http://www.hightopo com/guide/guide/core/vector/ht-vector-guide.html#ref_binding) العقدة.a('alarmColor2', 'rgb(150, 150, . 150)');// نفس ما ورد أعلاه العقدة.a('tpNode', true);// يتم استخدام إعداد الخاصية هذا فقط للتمييز بين مواقع النقل والمواقع الصغيرة، والتي سيتم استخدامها لاحقًا}}تمت إضافة جميع خطوط ومحطات مترو الأنفاق. لكن! قد لا تتمكن من رؤية الرسوم البيانية التي رسمتها لأنها صغيرة جدًا. في هذا الوقت، يمكنك تعيين وظيفة fitContent في مكون طوبولوجيا graphView. وبالمناسبة، قمنا أيضًا بتعيين كل شيء على الرسم البياني للطوبولوجيا ليكون غير منقول:
gv.fitContent(false, 0.00001);// الحجم التكيفي، المعلمة 1 هي ما إذا كان سيتم تحريكها، المعلمة 2 هي قيمة الحشو gv والحدود gv.setMovableFunc(function(){ return false;// اضبط العقدة على gv على يكون غير منقول });الآن يمكن عرض خريطة طريق مترو الأنفاق الخاصة بك ~ دعنا نلقي نظرة على التفاعل.
تفاعلالأول هو حدث حركة الماوس، عندما ينزلق الماوس فوق خط معين، سيصبح الخط أكثر سمكًا، إذا قمت بالتمرير لفترة من الوقت، يمكنك أيضًا رؤية رقم هذا الخط عندما يتحرك الماوس إلى موقع النقل موقع صغير، ستصبح الأيقونة المقابلة للموقع أكبر وعندما يتغير اللون، سيصبح الخط أكبر أيضًا. عند تحريك الماوس، ستعود الأيقونة إلى لونها الأصلي وسيصبح الخط أصغر. والفرق هو أنه عندما يتحرك الماوس إلى محطة النقل، ستدور محطة النقل.
بالنسبة لحدث انزلاق الماوس، أقوم مباشرة بتنفيذ حدث mousemove استنادًا إلى div الأساسي لـ gv، وتمرير معلمات الحدث من خلال وظيفة getDataAt المغلفة بـ ht، والحصول على العقدة المقابلة ضمن الحدث، وبعد ذلك يمكنك تشغيل العقدة حسب الرغبة :
gv.getView().addEventListener('mousemove', function(e) { var data = gv.getDataAt(e);// قم بتمرير نقطة الإحداثيات المنطقية أو معلمة حدث الحدث التفاعلي وإرجاع البداية تحت النقطة الحالية if( name ) { OriginNode(name);// احتفظ بالعقدة بحجمها الأصلي في جميع الأوقات} if (مثيل بيانات ht.Polyline) {// تحديد نوع عقدة الحدث dm.sm().ss(data);// حدد اسم الأنبوب = ''; ClearInterval(interval); getTag() !== name && data.a('tpNode')) {// إذا لم تكن نفس العقدة، وكان كائن حدث mousemove هو نوع ht.Node، فقم بتعيين الفاصل الزمني لتدوير العقدة = setInterval(function() { data.setRotation(data.getRotation() - Math.PI/16); // التدوير بناءً على التدوير الخاص به}, 100); } if(data.a('npNode')) {/ / إذا انتقل الماوس إلى موقع صغير، فأوقف الرسوم المتحركة ClearInterval(interval }expandNode(data, name);//// وظيفة عقدة التكبير المخصصة، سهلة نسبيًا، لم أعد ملتزمًا بالرمز، يمكنك الانتقال إلى http://hightopo.com/ لعرض dm.sm().ss(data); // قم بتعيين اسم العقدة المحددة = data.getTag();// كمتغير تخزين للعقدة السابقة، يمكنك الحصول على العقدة من خلال هذه القيمة} else {// في أي حالة أخرى، لم يتم تحديد أي شيء وتشغيل الرسوم المتحركة تم مسح موقع النقل dm.sm( ).ss(null name = ''; ClearInterval(interval }});عندما يحوم الماوس فوق خط مترو الأنفاق، يتم عرض معلومات الخط المحددة، ويتم ذلك عن طريق تعيين تلميح الأداة (ملاحظة: يجب تشغيل مفتاح تلميح الأداة gv):
gv.enableToolTip();// قم بتشغيل مفتاح تلميح الأدوات if(num === '68') polyline.setToolTip('AP M');// قم بتعيين معلومات المطالبة else if(num === '60') polyline.setToolTip('G F'); else polyline.setToolTip('Line' + num);ثم أستخدم نموذج النموذج الموجود في الزاوية اليمنى السفلية للنقر على سطر معين في النموذج، أو انقر نقرًا مزدوجًا فوق أي موقع أو خط على خريطة الطوبولوجيا، وسوف تتكيف خريطة الطوبولوجيا مع الجزء المقابل، والجزء الذي تم النقر عليه نقرًا مزدوجًا سيتم عرضها في وسط الخريطة الطوبولوجية.
لا يبدو أنني قد أوضحت جزء الإعلان من النموذج حتى الآن. . . وذلك لإنشاء مكون نموذج نموذج من خلال فئة ht.widget.FomePane الجديدة، والحصول على القسم الأساسي لمكون النموذج من خلال form.getView()، ووضع div هذا في الركن الأيمن السفلي من النص، ثم إضافة صف إلى النموذج من خلال الدالة addRow عناصر النموذج، يمكنك إضافة أي عدد من العناصر في هذا الصف، من خلال addRow تحدد المعلمة الثانية للوظيفة (مصفوفة) عرض عنصر النموذج المضاف، وتقوم المعلمة الثالثة بتعيين ارتفاع الصف:
وظيفة createForm() {// أنشئ نموذج النموذج في الزاوية اليمنى السفلية var form = new ht.widget.FormPane();form.setWidth(200);//ضبط عرض النموذجform.setHeight(416);// اضبط ارتفاع النموذج Let view =form.getView(); document.body.appendChild(view);// أضف النموذج إلى النص view.style.zIndex = 1000; view.style.bottom = '10px'; // تحدد جميع مكونات ht تقريبًا مسارات مطلقة view.style.right = '10px'; forEach(function(nameString) { form.addRow([// أضف صفًا إلى النموذج{// زر عنصر النموذج الأول في هذا الصف: {// إضافة رمز الزر إلى النموذج: 'images/Line'+nameString.value+'.json'،// تعيين خلفية رمز الزر: ''،// تعيين لون خلفية الزر: ''،// تعيين لون حد الزر القابل للنقر عليه: خطأ // اضبط الزر ليكون غير قابل للنقر عليه} }, {// زر عنصر النموذج الثاني: { label: nameString.name, labelFont: 'bold 14px arial, sans-serif'، labelColor: '#fff'، الخلفية: ''، borderColor: ''، onClicked: function() {// انقر فوق الزر حدث رد الاتصال gv.sm().ss(dm.getDataByTag(nameString.value) );// قم بتعيين السطر المقابل للزر المضغوط المحدد gv.fitData(gv.sm().ld(), true, 5);// عرض خط مترو الأنفاق المحدد في وسط خريطة الطوبولوجيا} } } ], [0.1, 0.2], 23);// المعلمة الثانية هي ضبط عرض المصفوفة في المعلمة الأولى، أقل أكثر من 1 هي النسبة، وأكبر من 1 هو العرض الفعلي والمعلمة الثالثة هي ارتفاع الصف})؛}.انقر فوق الموقع لعرض العلامة الحمراء، وانقر نقرًا مزدوجًا فوق العقدة لوضعها بشكل تكيفي في وسط خريطة الهيكل، وانقر نقرًا مزدوجًا فوق المساحة الفارغة لإخفاء العلامة الحمراء. ويتم التحكم في المحتوى من خلال مراقبة الأحداث لمكون الهيكل gv. الكود واضح وسهل الفهم كما يلي:
var العقدة = createRedLight();// أنشئ عقدة جديدة، يتم عرضها كنمط ضوء أحمر gv.mi(function(e) {// مراقبة الأحداث في مكون الهيكل في ht if(e.kind === 'clickData' && (e.data.a('tpNode') || e.data.a('npNode'))) {// تحصل e.kind على نوع الحدث الحالي، وتحصل e.data على العقدة ضمن الحدث الحالي. data.getPosition() .x, e.data.getPosition().y);// اضبط إحداثيات العقدة على موضع العقدة تحت الحدث الحالي} else if(e.kind === 'doubleClickData') {// انقر نقرًا مزدوجًا فوق العقدة gv.fitData(e.data, false, 10);// قم بتكييف العقدة الموجودة تحت الحدث في مركز خريطة الهيكل. المعلمة 1 هي العقدة التكيفية، والمعلمة 2 هي ما إذا كان سيتم تحريكها ، والمعلمة 3 هي حشوة gv والحدود } else if(e.kind === 'doubleClickBackground') {// انقر نقرًا مزدوجًا فوق المساحة الفارغة العقدة.s('2d.visible', false);// تعيين عقدة العقدة لتكون غير مرئية عرض HT للويب دليل الأسلوب (http://www.hightopo.com/guide/guide/core/theme/ht-theme-guide.html#ref_style) }});لاحظ أن s (style) وa (attr) يتم تعريفهما على هذا النحو تكون ثابتة أو دالة، وهي مرنة للغاية.
وأخيرا، يتم عمل جزء صغير عند اختيار موقع ما، سيتم عرض أيقونة التنفس الحمراء أعلى الموقع للإشارة إلى الموقع المحدد حاليا.
يتم إكمال جزء التنفس باستخدام وظيفة setAnimation الخاصة بـ ht. قبل استخدام هذه الوظيفة، يجب عليك أولاً تشغيل مفتاح الرسوم المتحركة لحاوية البيانات، ثم ضبط الرسوم المتحركة:
dm.enableAnimation();// تشغيل وظيفة تبديل الرسوم المتحركة لحاوية البيانات createRedLight() { varnode = new ht.Node(); عقدة العقدة .setSize(1, 1);// اضبط حجم العقدة العقدة.setLayer('firstTop');// اضبط العقدة التي سيتم عرضها على الطبقة العليا من gv عقدة.s('2d.visible', false);// العقدة غير مرئية العقدة.s( 'select.width', 0);// الحد عند تحديد العقدة هو 0 وغير مرئي العقدة.s('2d.selectable', false)؛// قم بتعيين هذه السمة، لا يمكن تحديد العقدة العقدة.setAnimation({// للحصول على تفاصيل حول إعداد الرسوم المتحركة، يرجى الرجوع إلى HT لدليل الرسوم المتحركة على الويب (http://www.hightopo.com/guide/guide /plugin/animation/ht- Animation-guide.html) توسيع العرض: { property: width,// قم بتعيين هذه الخاصية ولم يتم تعيين AccessType، والإعداد الافتراضي هو تعيين الخاصية والحصول عليها من خلال setWidth/getWidth يتم استخدام الارتفاع أدناه. يتم الحصول عليها جميعًا بالحجم الذي تم تعيينه مسبقًا من: 0.5، // قيمة السمة في بداية الرسوم المتحركة إلى: 1، // قيمة السمة في نهاية الرسوم المتحركة التالية: طي العرض // نوع السلسلة، يحدد ما سيتم تنفيذه بعد اكتملت الرسوم المتحركة الحالية، ويمكن للرسوم المتحركة التالية دمج رسوم متحركة متعددة}،lapseWidth: { property: width, from: 1, to: 0.5, next:expandWidth },expandHeight: { property: height, from: 0.5, to: 1, next:lapseHeight },lapseHeight: { property: height, from: 1, to: 0.5, next:expandHeight }, start: [expandWidth,expandHeight]//مصفوفة، تستخدم لتحديد واحد أو أكثر من الرسوم المتحركة المراد تشغيلها} ) ; dm.add(node);انتهى كل الكود!
تلخيصاستغرق هذا العرض التوضيحي يومين لإكماله، وكنت أشعر دائمًا بعدم الرغبة في القيام بذلك، ومع ذلك، في بعض الأحيان لم أتمكن من استيعاب الأمر، واستغرق الأمر الكثير من الوقت، لكن بشكل عام كسبت الكثير أعتقد أنه طالما مررت، فما عليك سوى استخدام getPoints().push لإضافة نقاط إلى المضلع، وبعد طلب المساعدة من المعلم، وجدت أن هذه الطريقة لا تؤدي إلى تحويلات فحسب، بل تسبب أيضًا مشكلات مختلفة، على سبيل المثال، قبل الحصول على النقاط ، يجب أن يكون لديك بالفعل نقاط في المضلع. هذا ممكن، ولكن في كثير من الحالات، ليس من السهل تعيين النقاط التي تمت تهيئتها، وسيكون الرمز مرهقًا للغاية. تتم إضافة النقاط مباشرة إلى متغير المضلع من خلال طريقة addPoint، ويتم توصيل النقاط بخطوط مستقيمة بشكل افتراضي. ليست هناك حاجة لتعيين المقاطع، يا لها من وظيفة رائعة.
أيضًا، نظرًا لأن حجم التكبير الافتراضي لـ ht هو 20، والمسافة بين العرض التوضيحي الخاص بي صغيرة جدًا، فإن عرض خريطة خط مترو الأنفاق يكون أيضًا صغيرًا جدًا عند التكبير إلى الحد الأقصى، لذلك قمت بتغيير سمة ZoomMax الافتراضية لـ ht في htconfig يجب أن تكون هذه القيمة قبل جميع استدعاءات ht، لأنه لا يمكن تغيير القيم المحددة في htconfig لاحقًا.
ما ورد أعلاه هو خريطة خط مترو الأنفاق التفاعلية المستندة إلى HTML5 Canvas التي يقدمها لك المحرر وآمل أن تكون مفيدة لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!