ตอนที่ฉันค้นหาแรงบันดาลใจใน echarts เมื่อสองวันก่อน ฉันเห็นตัวอย่างแผนที่ การวางตำแหน่งแผนที่ ฯลฯ ที่คล้ายกันมากมาย แต่ดูเหมือนว่าจะไม่มีแผนที่รถไฟใต้ดิน ฉันจึงใช้เวลาสักพักในการสาธิตแผนที่รถไฟใต้ดินแบบโต้ตอบนี้ คะแนนบนรถไฟใต้ดินถูกสุ่มดาวน์โหลดจากอินเทอร์เน็ต บทความนี้บันทึกผลประโยชน์บางส่วนของฉัน (เพราะว่าฉันยังเป็นมือใหม่) และการใช้งานโค้ดนี้ฉันหวังว่ามันจะช่วยเพื่อนบางคนได้ แน่นอนถ้าคุณมีความคิดเห็นใด ๆ คุณสามารถบอกฉันได้โดยตรงโดยการสื่อสารร่วมกันเท่านั้นที่เราจะก้าวหน้าได้
การเรนเดอร์
http://www.hightopo.com/demo/subway/index.html
แผนที่มีเนื้อหามากเกินไปเล็กน้อย หากคุณต้องการแสดงทั้งหมด แบบอักษรจะดูเล็กไปหน่อย แต่ก็ไม่สำคัญ คุณสามารถซูมเข้าหรือออกได้ตามต้องการ แบบอักษรและเนื้อหาที่วาดจะไม่บิดเบี้ยว ท้ายที่สุด พวกมันทั้งหมดถูกวาดด้วยเวกเตอร์~
การสร้างอินเทอร์เฟซdiv พื้นฐานถูกสร้างขึ้นผ่านคอมโพเนนต์ ht.graph.GraphView จากนั้นคุณสามารถใช้วิธีการที่ดีที่ HT สำหรับ Web เตรียมไว้ให้ และเพียงแค่เรียก canvas brush เพื่อวาดแบบไม่เป็นทางการ มาดูวิธีสร้าง 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); //เพิ่ม div พื้นฐานของคอมโพเนนต์ให้กับ body style.left = '0 ';//องค์ประกอบเริ่มต้นอยู่ในตำแหน่งที่แน่นอน ดังนั้นให้ตั้งค่าตำแหน่ง style.right = '0'; style.top = '0'; style.bottom = '0'; () { self.iv(); }, false); //เหตุการณ์การเปลี่ยนแปลงหน้าต่าง}ตอนนี้ฉันสามารถดูเดิลบน div นี้ได้แล้ว~ อันดับแรกฉันได้รับคะแนนบนแผนที่รถไฟใต้ดินที่ดาวน์โหลดมา และวางไว้ใน Subway.js ไฟล์ js นี้เป็นเนื้อหาที่ดาวน์โหลดทั้งหมด ฉันไม่ได้ทำอะไรเลย การเปลี่ยนแปลงอื่นๆ ส่วนใหญ่จะเพิ่มสิ่งเหล่านี้ ชี้ไปที่อาร์เรย์ตามบรรทัด เช่น:
mark_Point13 = [];//Line Array ประกอบด้วยพิกัดเริ่มต้นและสิ้นสุดของเส้นและชื่อของเส้น 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({ ชื่อ: 'Yu Zhu', ค่า: [113.41548,23.10547 ]} n_Point13.push({ ชื่อ: 'หยูเฟิงเว่ย', ค่า: [113.41548,23.10004]});ต่อไป ในการวาดเส้นรถไฟใต้ดิน ฉันได้ประกาศอาร์เรย์ lineNum เพื่อเก็บหมายเลขของสายรถไฟใต้ดินทั้งหมดใน js และอาร์เรย์สีเพื่อเก็บสีของสายรถไฟใต้ดินทั้งหมด ดัชนีของสีเหล่านี้จะเหมือนกับรถไฟใต้ดิน บรรทัดใน lineNum ดัชนีที่มีหมายเลขสอดคล้องกับหนึ่งต่อหนึ่ง:
var lineNum = ['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 ก็ยังเป็นแบบปกติเช่นกัน โดยบรรทัดใดจะตั้งชื่อตาม Add ตัวเลขที่สอดคล้องกัน ดังนั้นเราเพียงแต่ต้องรวมสตริงกับตัวเลขนี้เพื่อรับอาร์เรย์ที่สอดคล้องกันใน js:
la lineName = 'Line' + num; la line = window[lineName]; คำจำกัดความของ createLine ก็ง่ายมากเช่นกัน ในการสร้างไปป์ไลน์ ht.Polyline เราสามารถเพิ่มจุดเฉพาะให้กับตัวแปรนี้ผ่านฟังก์ชัน polyline.addPoint() และตั้งค่าวิธีการเชื่อมต่อของจุดต่างๆ ผ่าน setSegments ฟังก์ชัน createLine(num, color) {//วาดเส้นแผนที่ var polyline = new ht.Polyline();//ไปป์ไลน์ Polygon polyline.setTag(num);//ตั้งค่าป้ายแท็กโหนดเป็นป้ายกำกับเดียว if(num = == '68') polyline.setToolTip('AP M');//ตั้งค่าข้อมูลแจ้งเป็นอย่างอื่นถ้า(num === '60') polyline.setToolTip('G F'); polyline.setToolTip('Line' + num); if(color) { polyline.s({//s เป็นตัวย่อของ setStyle ให้ตั้งค่าสไตล์ 'shape.border.width': 0.4,//ตั้งค่าความกว้างของเส้นขอบของ รูปหลายเหลี่ยม 'shape .border.color': color,//กำหนดสีเส้นขอบของรูปหลายเหลี่ยม 'select.width': 0.2,//ตั้งค่าความกว้างของเส้นขอบของโหนดที่เลือก 'select.color': color//ตั้งค่าสีเส้นขอบของโหนดที่เลือก}); } ให้ lineName = 'Line' + num; ให้ line = window[lineName]; for(let i = 0; i < line.length; i++) { for(let j = 0; j < line[i].coords.length; j++) { polyline.addPoint({x: บรรทัด[i].coords[j][0]*300, y: -line[i].coords[j][1]*300}); if(num === '68'){//APM (มีสองจุด แต่จุดอยู่ในอาร์เรย์เดียวกัน) if(i === 0 && j === 0) { polyline.setSegments([1]); } else if(i === 1 && j === 0) { polyline.getSegments().push(1); } else { polyline.getSegments().push(2); } } } } polyline.setLayer('0');//ตั้งค่าบรรทัด ในชั้นล่าง จุดจะถูกตั้งค่าไว้ที่ชั้นบนสุด dm.add(polyline);//เพิ่มไปป์ไลน์ลงในที่เก็บข้อมูลเพื่อจัดเก็บ มิฉะนั้นไปป์ไลน์จะอยู่ในสถานะอิสระและจะไม่แสดงบนแผนที่ทอพอโลยี return polyline;}มีหลายสถานการณ์ในการเพิ่มจุดบนรถไฟใต้ดินในโค้ดข้างต้น เนื่องจาก Line68 มีจุดกระโดดเมื่อตั้งค่าบรรทัดใน js ดังนั้นเราจึงต้องข้ามไปที่มัน พื้นที่มีจำกัด สำหรับการประกาศเฉพาะของ Line68 อาร์เรย์ดูที่ Subway.js
สิ่งหนึ่งที่ควรทราบคือ หากคุณใช้ฟังก์ชัน addPoint และไม่ได้ตั้งค่าเซ็กเมนต์ จุดที่เพิ่มจะเชื่อมต่อกับเส้นตรงตามค่าเริ่มต้น คำจำกัดความของเซ็กเมนต์จะเป็นดังนี้:
1: moveTo ครอบครองข้อมูล 1 จุด ซึ่งแสดงถึงจุดเริ่มต้นของเส้นทางใหม่
2: lineTo ใช้ข้อมูล 1 จุด แสดงถึงการเชื่อมต่อจากจุดสุดท้ายถึงจุดนี้
3: quadraticCurveTo ใช้ข้อมูล 2 จุด จุดแรกใช้เป็นจุดควบคุมเส้นโค้ง และจุดที่สองใช้เป็นจุดสิ้นสุดของเส้นโค้ง
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];//Large station if(tP) {//บางสายไม่มีสถานีรับส่งสำหรับ(let i = 0; i < tP.length; i++) { ให้โหนด = createNode(tP[i].name, tP[i].value, color[index]);//เพิ่มโหนด node.s({//ตั้งค่าสไตล์สไตล์โหนด 'label.scale': 0.05,//การปรับขนาดข้อความเพื่อหลีกเลี่ยงข้อจำกัดของเบราว์เซอร์ ปัญหาขนาดตัวอักษรขั้นต่ำ 'label.font': ' ตัวหนา 12px arial, sans-serif'//ตั้งค่าแบบอักษรของข้อความ }); node.setSize(0.6, 0.6);//ตั้งค่าขนาดโหนด เนื่องจากออฟเซ็ตระหว่างแต่ละจุดใน js น้อยเกินไป ฉันจึงต้องตั้งค่าโหนดให้เล็กลง node.setImage('images/rotating arrow.json');//ตั้งค่ารูปภาพของโหนด node.a('alarmColor1 ', ' RGB(150, 150, 150)'); //แอตทริบิวต์ attr คุณสามารถตั้งค่าอะไรก็ได้ที่นี่ alarmColor1 เป็นแอตทริบิวต์ที่ผูกไว้ใน json ของรูปภาพที่ตั้งไว้ด้านบน สำหรับรายละเอียด โปรดดูที่ HT สำหรับ Web Vector Manual (http://www.hightopo . com/guide/guide/core/vector/ht-vector-guide.html#ref_binding) node.a('alarmColor2', 'rgb (150, 150, 150)');//เหมือนกับด้านบน node.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);//เก็บโหนดไว้ที่ขนาดเดิมตลอดเวลา} ถ้า (อินสแตนซ์ข้อมูลของ ht.Polyline) {//กำหนดประเภทของโหนดเหตุการณ์ dm.sm().ss(data);//เลือกชื่อไปป์ = ''; clearInterval(interval); } else if (data instanceof ht.Node) { if(data. 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(ช่วงเวลา }});เมื่อเมาส์วางอยู่เหนือรถไฟใต้ดิน ข้อมูลสายเฉพาะจะปรากฏขึ้น ฉันทำเช่นนี้โดยการตั้งค่าคำแนะนำเครื่องมือ (หมายเหตุ: ต้องเปิดสวิตช์คำแนะนำเครื่องมือของ gv):
gv.enableToolTip();//เปิดสวิตช์คำแนะนำเครื่องมือ if(num === '68') polyline.setToolTip('AP M');//ตั้งค่าข้อมูลพร้อมท์เป็นอย่างอื่น if(num === '60') polyline.setToolTip('GF'); อย่างอื่น polyline.setToolTip('Line' + num);จากนั้นฉันใช้แบบฟอร์มที่มุมขวาล่างเพื่อคลิกบนบรรทัดเฉพาะบนแบบฟอร์ม หรือดับเบิลคลิกที่ไซต์หรือบรรทัดใดๆ บนแผนผังโทโพโลยี แผนผังโทโพโลยีจะปรับให้เข้ากับส่วนที่เกี่ยวข้อง และส่วนที่ดับเบิลคลิก จะแสดงที่กึ่งกลางของแผนที่โทโพโลยี
ดูเหมือนว่าฉันยังไม่ได้อธิบายส่วนประกาศในแบบฟอร์มนี้ - - นั่นคือการสร้างส่วนประกอบของฟอร์มผ่านคลาส ht.widget.FomePane ใหม่ รับ div พื้นฐานของส่วนประกอบของฟอร์มผ่าน form.getView() วาง div นี้ที่มุมขวาล่างของเนื้อหา จากนั้นเพิ่มแถวไปที่ แบบฟอร์มผ่านฟังก์ชัน addRow รายการแบบฟอร์ม คุณสามารถเพิ่มรายการจำนวนเท่าใดก็ได้ในแถวนี้ผ่าน addRow พารามิเตอร์ที่สองของฟังก์ชัน (อาร์เรย์) ตั้งค่าความกว้างของรายการแบบฟอร์มที่เพิ่ม และพารามิเตอร์ที่สามตั้งค่าความสูงของแถว:
ฟังก์ชั่น createForm() {//สร้างแบบฟอร์มที่มุมขวาล่าง var form = new ht.widget.FormPane(); form.setWidth(200);//กำหนดความกว้างของแบบฟอร์ม form.setHeight(416);// กำหนดความสูงของแบบฟอร์มให้ view = form.getView(); document.body.appendChild(view);//เพิ่มแบบฟอร์มลงในเนื้อหา view.style.zIndex = 1000; view.style.bottom = '10px'; // ส่วนประกอบ ht เกือบทั้งหมดตั้งค่าเส้นทางที่แน่นอน view.style.right = '10px'; view.style.พื้นหลัง = 'rgba(211, 211, 211, 0.8)'; forEach(function(nameString) { form.addRow([//เพิ่มแถวในแบบฟอร์ม{//ปุ่มรายการแบบฟอร์มแรกในแถวนี้: {//เพิ่มไอคอนปุ่มในรูปแบบ: 'images/Line'+nameString.value+'.json',//ตั้งค่าพื้นหลังไอคอนปุ่ม: '',//ตั้งค่าสีพื้นหลังของปุ่ม: '',//ตั้งค่า สีขอบของปุ่มที่คลิกได้: false//Set the button to be non-clickable} }, {//ปุ่มรายการแบบฟอร์มที่สอง: { 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 node = createRedLight();//สร้างโหนดใหม่โดยแสดงเป็นสไตล์แสงสีแดง gv.mi(function(e) {//การตรวจสอบเหตุการณ์ในส่วนประกอบโทโพโลยีใน ht if(e.kind === 'clickData ' && (e.data.a('tpNode') || e.data.a('npNode'))) {//e.kind รับประเภทเหตุการณ์ปัจจุบัน e.data รับโหนดภายใต้เหตุการณ์ปัจจุบัน node.s('2d.visible', true);//ตั้งค่าโหนดโหนดให้มองเห็นได้ node.setPosition(e. data.getPosition() .x, e.data.getPosition().y);//ตั้งค่าพิกัดของโหนดเป็นตำแหน่งของโหนดภายใต้เหตุการณ์ปัจจุบัน} else if(e.kind === 'doubleClickData') {//ดับเบิลคลิกโหนด gv.fitData(e.data, false, 10);//ปรับโหนดภายใต้เหตุการณ์ให้อยู่ตรงกลางของแมปโทโพโลยี พารามิเตอร์ 1 คือโหนดแบบปรับเปลี่ยนได้ ส่วนพารามิเตอร์ 2 คือต้องการให้เคลื่อนไหวหรือไม่ และพารามิเตอร์ 3 คือ Padding ของ gv และ border } else if(e.kind === 'doubleClickBackground') {//ดับเบิลคลิกที่ช่องว่าง node.s('2d.visible', false);//ตั้งค่า โหนดโหนดจะมองไม่เห็น View HT สำหรับเว็บ คู่มือสไตล์ (http://www.hightopo.com/guide/guide/core/theme/ht-theme-guide.html#ref_style) }});โปรดทราบว่า s (style) และ a (attr) ถูกกำหนดไว้เช่นนี้ s คือแอตทริบิวต์สไตล์ที่กำหนดล่วงหน้าโดย ht และ a คือแอตทริบิวต์ที่ผู้ใช้ของเรากำหนดเอง ผลลัพธ์มักจะถูกเรียกโดยการเรียกสตริงนี้ เป็นค่าคงที่หรือฟังก์ชันซึ่งมีความยืดหยุ่นมาก
ในที่สุด จะมีการสร้างส่วนเล็กๆ ขึ้น เมื่อเลือกไซต์แล้ว ไอคอนรูปหายใจสีแดงจะปรากฏเหนือไซต์เพื่อระบุไซต์ที่เลือกในปัจจุบัน
ส่วนการหายใจเสร็จสมบูรณ์โดยใช้ฟังก์ชัน setAnimation ของ ht ก่อนที่จะใช้ฟังก์ชันนี้ คุณต้องเปิดสวิตช์ภาพเคลื่อนไหวของที่เก็บข้อมูลก่อน จากนั้นจึงตั้งค่าภาพเคลื่อนไหว:
dm.enableAnimation();//เปิดฟังก์ชันสลับภาพเคลื่อนไหวของที่เก็บข้อมูล createRedLight() { var node = new ht.Node(); node.setImage('images/RedLight.json');//ตั้งค่ารูปภาพ โหนดของโหนด .setSize(1, 1);//กำหนดขนาดของโหนด node.setLayer('firstTop');//ตั้งค่าโหนดที่จะแสดงบนเลเยอร์ด้านบนของ gv node.s('2d.visible', false);// โหนดมองไม่เห็น node.s( 'select.width', 0);//เส้นขอบเมื่อเลือกโหนดคือ 0 และ node.s ที่มองไม่เห็น ('2d.selectable', false);//ตั้งค่าแอตทริบิวต์นี้ ไม่สามารถเลือกโหนดได้ node.setAnimation({//สำหรับรายละเอียดเกี่ยวกับการตั้งค่าภาพเคลื่อนไหว โปรดดูคู่มือ HT สำหรับ Web Animation (http://www.hightopo.com/guide/guide /plugin/animation/ht-animation-guide.html) expandWidth: { คุณสมบัติ: ความกว้าง//ไม่ได้ตั้งค่าคุณสมบัตินี้และประเภทการเข้าถึง ค่าเริ่มต้นคือการตั้งค่าและรับคุณสมบัติผ่าน setWidth/getWidth ความกว้างที่นี่และ ใช้ความสูงด้านล่าง ทั้งหมดได้มาจากขนาดที่ตั้งไว้ก่อนหน้านี้จาก: 0.5, //ค่าแอตทริบิวต์ที่จุดเริ่มต้นของภาพเคลื่อนไหว ถึง: 1,//ค่าแอตทริบิวต์ที่ส่วนท้ายของภาพเคลื่อนไหว ถัดไป:ยุบWidth//ประเภทสตริง ระบุสิ่งที่จะดำเนินการหลังจาก ภาพเคลื่อนไหวปัจจุบันเสร็จสมบูรณ์ ภาพเคลื่อนไหวถัดไปสามารถรวมภาพเคลื่อนไหวหลายรายการได้},ยุบWidth: { คุณสมบัติ: ความกว้าง, จาก: 1, ถึง: 0.5, ถัดไป: ขยายความกว้าง }, ขยายความสูง: { คุณสมบัติ: ความสูง, จาก: 0.5, ถึง: 1, ถัดไป:ยุบความสูง },ยุบความสูง: { คุณสมบัติ: ความสูง, จาก: 1, ถึง: 0.5, ถัดไป: ขยายความสูง }, เริ่มต้น: [expandWidth, ขยายความสูง]//อาร์เรย์ ใช้เพื่อระบุภาพเคลื่อนไหวอย่างน้อยหนึ่งรายการที่จะเริ่มต้น} ) ; dm.add(โหนดส่งคืน);}โค้ดทั้งหมดจบแล้ว!
สรุปการสาธิตนี้ใช้เวลาสองวันจึงจะเสร็จสิ้น และฉันก็รู้สึกไม่เต็มใจที่จะทำเช่นนั้นเสมอ อย่างไรก็ตาม บางครั้งฉันก็ไม่เข้าใจและใช้เวลานานมาก แต่โดยรวมแล้วฉันได้ประโยชน์มาก คิดว่าตราบใดที่ผมผ่าน แค่ใช้ getPoints().push เพื่อเพิ่มคะแนนให้กับรูปหลายเหลี่ยม หลังจากขอความช่วยเหลือจากปรมาจารย์ ผมพบว่าวิธีนี้ไม่เพียงแต่เป็นการอ้อมเท่านั้น แต่ยังทำให้เกิดปัญหาต่างๆ อีกด้วย เช่น ก่อนที่จะได้คะแนน คุณต้องมีจุดอยู่ในรูปหลายเหลี่ยมอยู่แล้ว เป็นไปได้ แต่ในหลายกรณี จุดที่เริ่มต้นนั้นไม่ใช่เรื่องง่าย และโค้ดจะยุ่งยากมาก คะแนนจะถูกเพิ่มลงในตัวแปรรูปหลายเหลี่ยมโดยตรงผ่านวิธี addPoint และจุดต่างๆ จะเชื่อมต่อกันด้วยเส้นตรงตามค่าเริ่มต้น ไม่จำเป็นต้องตั้งค่าส่วน ช่างเป็นฟังก์ชันที่น่ารักจริงๆ
นอกจากนี้ เนื่องจากขนาดการซูมเริ่มต้นของ ht คือ 20 และระยะห่างของการสาธิตของฉันมีขนาดเล็กมาก การแสดงแผนที่เส้นรถไฟใต้ดินจึงเล็กมากเมื่อขยายให้สูงสุด ดังนั้นฉันจึงเปลี่ยนแอตทริบิวต์เริ่มต้นของ ZoomMax เป็น ht ใน htconfig , เปลี่ยนค่านี้จะต้องอยู่ก่อนการโทร ht ทั้งหมดเนื่องจากค่าที่ตั้งไว้ใน htconfig ไม่สามารถเปลี่ยนแปลงได้ในภายหลัง
ด้านบนนี้เป็นแผนที่เส้นทางรถไฟใต้ดินแบบโต้ตอบที่ใช้ HTML5 Canvas ที่บรรณาธิการแนะนำให้คุณทราบ ฉันหวังว่าจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!