Peta jalur kereta bawah tanah interaktif berdasarkan Kanvas HTML5

Saat saya mencari inspirasi di echarts dua hari yang lalu, saya melihat banyak contoh peta, posisi peta, dll yang serupa, tetapi sepertinya tidak ada peta kereta bawah tanah, jadi saya meluangkan waktu untuk mengutak-atik demo peta kereta bawah tanah interaktif ini poin di jalur kereta bawah tanah diunduh secara acak dari Internet. Artikel ini mencatat beberapa keuntungan saya (bagaimanapun juga, saya masih pemula) dan penerapan kodenya. Saya harap ini dapat membantu beberapa teman. Tentu saja, jika Anda punya pendapat, Anda bisa memberi tahu saya secara langsung. Hanya dengan berkomunikasi bersama kita bisa mencapai kemajuan.

rendering

http://www.hightopo.com/demo/subway/index.html

Peta memiliki konten yang terlalu banyak. Jika Anda ingin menampilkan semuanya, font akan tampak agak kecil, tetapi tidak masalah. Anda dapat memperbesar dan memperkecil sesuai kebutuhan Bagaimanapun, semuanya digambar dengan vektor~

Div yang mendasarinya dihasilkan melalui komponen ht.graph.GraphView. Kemudian Anda dapat menggunakan metode bagus yang disediakan oleh HT untuk Web dan cukup memanggil kuas kanvas untuk menggambar dengan santai.

 var dm = new ht.DataModel();//Data container var gv = new ht.graph.GraphView(dm);//Komponen topologi gv.addToDOM();//Tambahkan komponen grafik topologi ke dalam isi

Fungsi addToDOM dideklarasikan sebagai berikut:

 addToDOM = function(){ var self = this, view = self.getView(), style = view.style; document.body.appendChild(view); '0 ';//Komponen default benar-benar diposisikan, jadi atur posisinya style.right = '0'; style.top = '0'; style.bottom = '0'; () { self.iv(); }, false); //Peristiwa perubahan jendela}

Sekarang saya bisa mencoret-coret div ini~ Pertama saya mendapatkan poin pada peta kereta bawah tanah yang diunduh, dan saya meletakkannya di subway.js. File js ini adalah semua konten yang diunduh, saya tidak melakukan apa pun. Perubahan lainnya terutama untuk menambahkan ini menunjuk ke array sesuai dengan garis, seperti:

 mark_Point13 = [];//Line array berisi koordinat titik awal dan akhir garis serta nama garis t_Point13 = [];// Station array berisi koordinat stasiun transfer pada saluran dan nama stasiun n_Point13 = [];//Array stasiun kecil berisi koordinat stasiun kecil pada jalur dan nama stasiun kecil mark_Point13.push({ name: 'Line 13', value: [113.4973,23.1095]}); mark_Point13.push({ nama: 'Baris 13', nilai: [113.4155,23.1080]}); t_Point13.push({ nama: 'Yu Zhu', nilai: [113.41548,23.10547 ]} ); n_Point13.push({ nama: 'Yufengwei', nilai: [113.41548,23.10004]});

Selanjutnya, untuk menggambar jalur kereta bawah tanah, saya mendeklarasikan array lineNum untuk menampung nomor semua jalur kereta bawah tanah di js, dan array warna untuk menampung warna semua jalur kereta bawah tanah. Indeks warna-warna ini sama dengan kereta bawah tanah baris di barisNum. Indeks bernomor bersesuaian satu per satu:

 var lineNum = ['1', '2', '3', '30', '4', '5', '6', '7', '8', '9', '13', '14 ', '32', '18', '21', '22', '60', '68'];var warna = ['#f1cd44', '#0060a1', '#ed9b4f', '#ed9b4f', '#007e3a', '#cb0447', '#7a1a57', '#18472c', '#008193', '#83c39e', '#8a8c29', '#82352b', '#82352b', '#09a1e0', '#8a8c29', '#82352b', '#b6d300', '#09a1e0'];

Kemudian lintasi lineNum, teruskan elemen dan warna di lineNum ke fungsi createLine, dan gambar garis kereta bawah tanah dan pencocokan warna sesuai dengan dua parameter ini. Lagi pula, metode penamaan di file js juga biasa nomor yang sesuai, jadi kita hanya perlu menggabungkan string dengan nomor ini untuk mendapatkan array yang sesuai di js:

 let lineName = 'Line' + num; let line = window[lineName]; Definisi createLine juga sangat sederhana. Untuk membuat pipeline ht.Polyline, kita dapat menambahkan titik tertentu ke variabel ini melalui fungsi polyline.addPoint(), dan mengatur metode koneksi titik-titik tersebut melalui setSegments. function createLine(num, color) {//Gambar garis peta var polyline = new ht.Polyline();//Pipa poligon polyline.setTag(num);//Tetapkan label tag node sebagai satu-satunya label if(num = == '68') polyline.setToolTip('AP M');//Atur informasi cepat yang lain if(num === '60') polyline.setToolTip('G F'); polyline.setToolTip('Line' + num); if(color) { polyline.s({//s adalah singkatan dari setStyle, atur gaya 'shape.border.width': 0.4,//Atur lebar tepian menjadi poligon 'bentuk .border.color': warna,//Tetapkan warna batas poligon 'select.width': 0.2,//Atur lebar batas simpul yang dipilih'select.color': color//Atur warna batas simpul yang dipilih}); } let lineName = 'Line' + num; for(biarkan i = 0; i < garis.panjang; i++) { untuk(biarkan j = 0; j < garis[i].coords.panjang; j++) { polyline.addPoint({x: baris[i].coords[j][0]*300, y: -line[i].coords[j][1]*300}); if(num === '68'){//baris APM (Ada dua, tetapi titik-titiknya berada dalam larik yang sama) if(i === 0 && j === 0) { polyline.setSegments([1] } else if(i === 1 && j === 0) { polyline.getSegments().push(1); else { polyline.getSegments().push(2); Pada lapisan bawah, titiknya diatur pada lapisan atas atas dm.add(polyline);//Tambahkan pipeline ke wadah data untuk penyimpanan, jika tidak, pipeline berada dalam keadaan bebas dan tidak akan ditampilkan pada peta topologi return polyline;}

Ada beberapa situasi untuk menambahkan titik pada jalur kereta bawah tanah pada kode di atas. Hal ini karena Line68 memiliki titik lompat ketika mengatur jalur di js, jadi kita harus melompat ke sana deklarasi spesifik dari array Line68.

Satu hal yang perlu diperhatikan di sini adalah jika Anda menggunakan fungsi addPoint dan tidak menyetel segmen, titik yang ditambahkan akan dihubungkan dengan garis lurus secara default. Definisi segmen adalah sebagai berikut:

1: moveTo, menempati 1 informasi titik, mewakili titik awal jalur baru

2: lineTo, menempati 1 informasi titik, mewakili koneksi dari titik terakhir ke titik ini

3: quadraticCurveTo, menempati 2 titik informasi, titik pertama digunakan sebagai titik kendali kurva, dan titik kedua digunakan sebagai titik akhir kurva

4: bezierCurveTo, menempati 3 titik informasi, titik pertama dan kedua digunakan sebagai titik kontrol kurva, dan titik ketiga digunakan sebagai titik akhir kurva

5: closePath, tidak menempati informasi titik, mewakili akhir dari gambar jalur ini dan menutup ke titik awal jalur

Jadi jika kita ingin melakukan perilaku melompat, setel saja segmennya ke 1.

Terakhir, titik-titik pada jalur kereta bawah tanah ini digambar. Bagian ini juga dipisahkan di subway.js. Namanya dimulai dengan mark_Point, t_Point dan n_Point. Saya telah menjelaskan array ini di bagian tampilan js sebelumnya gulir ke atas untuk melihat tampilan.

Kami menambahkan node ht.Node pada titik-titik ini. Ketika node ditambahkan ke wadah data dm, node tersebut akan ditampilkan di peta topologi. Tentu saja, premisnya adalah bahwa wadah data yang disetel oleh komponen peta topologi gv adalah dm ini . Karena keterbatasan ruang, saya hanya akan menampilkan bagian kode untuk penambahan titik pada jalur kereta bawah tanah:

 var tName = 't_Point' + num;var tP = window[tName];//Stasiun besar if(tP) {//Beberapa jalur tidak memiliki stasiun transfer untuk(misalkan i = 0; i < tP.length; i++) { biarkan simpul = buatNode(tP[i].nama, tP[i].nilai, color[index]);//Tambahkan node node.s({//Setel gaya gaya node 'label.scale': 0,05,//Penskalaan teks untuk menghindari batasan browser Masalah ukuran font minimum'label.font': ' tebal 12px arial, sans-serif'//Mengatur font teks }); node.setSize(0.6, 0.6);//Mengatur ukuran node. Karena offset antara setiap titik di js terlalu kecil, saya harus mengatur node lebih kecil node.setImage('images/rotating Arrow.json');//Mengatur gambar node node.a('alarmColor1 ', ' rgb(150, 150, 150)'); //attr atribut, Anda dapat mengatur apa pun di sini. alarmColor1 adalah atribut yang terikat dalam json dari kumpulan gambar di atas .com/guide/guide/core/vector/ht-vector-guide.html#ref_binding) node.a('alarmColor2', 'rgb(150, 150, 150)');//Sama seperti di atas node.a('tpNode', true);//Pengaturan atribut ini hanya digunakan untuk membedakan situs transfer dan situs kecil, yang akan digunakan nanti}}

Semua jalur dan stasiun kereta bawah tanah telah ditambahkan. Tetapi! Anda mungkin tidak dapat melihat grafik yang Anda gambar karena terlalu kecil. Saat ini, Anda dapat mengatur fungsi fitContent pada komponen topologi graphView, kami juga mengatur semua yang ada pada grafik topologi menjadi tidak dapat dipindahkan:

 gv.fitContent(false, 0.00001);//Ukuran adaptif, parameter 1 adalah apakah akan dianimasikan, parameter 2 adalah nilai padding gv dan batas gv.setMovableFunc(function(){ return false;//Setel node di gv ke tidak dapat digerakkan });

Sekarang peta rute kereta bawah tanah Anda dapat ditampilkan~ Mari kita lihat interaksinya.

Yang pertama adalah event pergerakan mouse. Saat mouse meluncur di atas garis tertentu, garis tersebut akan menjadi lebih tebal, dan Anda dapat melihat nomor garis tersebut dengan mengarahkan kursor beberapa saat saat mouse berpindah ke tempat transfer atau situs kecil , ikon yang sesuai dengan situs akan menjadi lebih besar dan Saat warnanya berubah, font juga akan menjadi lebih besar. Saat Anda menggerakkan mouse, ikon akan kembali ke warna aslinya dan font akan menjadi lebih kecil. Bedanya ketika mouse digerakkan ke stasiun transfer maka stasiun transfer akan berputar.

Untuk acara geser mouse, saya langsung menjalankan acara mousemove berdasarkan div yang mendasari gv. Saya meneruskan parameter acara melalui fungsi getDataAt yang dienkapsulasi oleh ht, mendapatkan node yang sesuai di bawah acara tersebut, dan kemudian saya dapat mengoperasikan node tersebut di akan:

 gv.getView().addEventListener('mousemove', function(e) { var data = gv.getDataAt(e);//Masukkan titik koordinat logis atau parameter peristiwa peristiwa interaktif dan kembalikan primitif di bawah titik saat ini if( name ) { originNode(name);//Jaga node pada ukuran aslinya setiap saat} if (data instanceof ht.Polyline) {//Tentukan jenis node kejadian dm.sm().ss(data);//Pilih nama pipa = ''; clearInterval(interval); else if (data instanceof ht.Node) { if(data. getTag( ) !== name && data.a('tpNode')) {//Jika node tersebut bukan node yang sama, dan objek event mousemove bertipe ht.Node, maka atur interval rotasi node = setInterval(function() { data.setRotation(data.getRotation() - Math.PI/16); //Putar berdasarkan rotasinya sendiri}, 100); if(data.a('npNode')) {/ /Jika mouse bergerak ke situs kecil, hentikan animasi clearInterval(interval } expandNode(data, name);////Fungsi zoom node yang disesuaikan, relatif mudah, saya tidak lagi terpaku pada kode, Anda dapat membuka http://hightopo.com/ untuk melihat dm.sm().ss(data); //Tetapkan nama node yang dipilih = data.getTag();//Sebagai variabel penyimpanan dari node sebelumnya, Anda bisa mendapatkan node melalui nilai ini} else {//Dalam kasus lain, tidak ada yang dipilih dan animasi aktif situs transfer dihapus dm.sm( ).ss(null); '';interval jelas(interval);

Saat mouse diarahkan ke jalur kereta bawah tanah, informasi jalur spesifik akan ditampilkan. Saya melakukan ini dengan mengatur tooltip (catatan: saklar tooltip gv harus dihidupkan):

 gv.enableToolTip();//Nyalakan saklar tooltip if(num === '68') polyline.setToolTip('AP M');//Setel informasi perintah else if(num === '60') polyline.setToolTip('G F'); lain polyline.setToolTip('Garis' + angka);

Kemudian saya menggunakan formulir formulir di sudut kanan bawah untuk mengklik baris tertentu pada formulir, atau klik dua kali situs atau baris mana pun pada peta topologi, dan peta topologi akan beradaptasi dengan bagian yang sesuai, dan klik dua kali bagian akan ditampilkan di tengah peta topologi.

Sepertinya saya belum menjelaskan bagian deklarasi pada formulir tersebut. . . Yaitu dengan membuat komponen formulir formulir melalui kelas ht.widget.FomePane baru, dapatkan div yang mendasari komponen formulir melalui form.getView(), tempatkan div ini di sudut kanan bawah badan, lalu tambahkan baris ke formulir formulir melalui fungsi addRow Item formulir, Anda dapat menambahkan sejumlah item di baris ini, melalui addRow Parameter kedua dari fungsi (array) menetapkan lebar item formulir yang ditambahkan, dan menetapkan tinggi baris melalui parameter ketiga:

 function createForm() {//Membuat formulir formulir di sudut kanan bawah var form = new ht.widget.FormPane(); form.setWidth(200);//Mengatur lebar formulir form.setHeight(416);// Atur tinggi formulir let view = form.getView(); document.body.appendChild(view);//Tambahkan formulir ke dalam badan view.style.zIndex = 1000; view.style.bottom = '10px'; // Hampir semua komponen ht menyetel jalur absolut view.style.right = '10px'; view.style.background = 'rgba(211, 211, 211, 0.8)'; forEach(function(nameString) { form.addRow([//Tambahkan baris ke formulir{//Tombol item formulir pertama di baris ini: {//Tambahkan ikon tombol ke formulir: 'images/Line'+nameString.value+'.json',//Atur latar belakang ikon tombol: '',//Atur batas latar belakang tombolWarna: '',//Atur warna batas tombol yang dapat diklik: false//Setel tombol agar tidak dapat diklik} }, {//Tombol item formulir kedua: { label: nameString.name, labelFont: 'bold 14px arial, sans-serif', labelColor: '#fff', latar belakang: '', borderColor: '', onClicked: function() {//Tombol klik acara callback gv.sm().ss(dm.getDataByTag(nameString.value) );//Atur baris yang sesuai dengan tombol tekan yang dipilih gv.fitData(gv.sm().ld(), true, 5);//Menampilkan jalur kereta bawah tanah yang dipilih di tengah peta topologi} } } ], [0.1, 0.2], 23);//Parameter kedua adalah mengatur lebar array pada parameter pertama, lebih kecil dari 1 adalah Rasio, lebih besar dari 1 adalah lebar sebenarnya. Parameter ketiga adalah tinggi baris});}.

Klik situs untuk menampilkan tanda merah, klik dua kali node untuk menempatkannya secara adaptif di tengah peta topologi, dan klik dua kali ruang kosong untuk menyembunyikan tanda merah. Konten dikontrol melalui pemantauan peristiwa komponen topologi gv.Sangat jelas dan mudah dimengerti.

 var node = createRedLight();//Buat node baru, ditampilkan sebagai gaya lampu merah gv.mi(function(e) {//Pemantauan peristiwa dalam komponen topologi di ht if(e.kind === 'clickData ' && (e.data.a('tpNode') || e.data.a('npNode'))) {//e.kind mendapatkan jenis peristiwa saat ini, e.data mendapatkan node di bawah peristiwa saat ini node.s('2d.visible', true);//Atur node node agar terlihat node.setPosition(e. data.getPosition() .x, e.data.getPosition().y);//Setel koordinat node ke posisi node di bawah peristiwa saat ini} else if(e.kind === 'doubleClickData') {//Klik dua kali node gv.fitData(e.data, false, 10);//Sesuaikan node di bawah peristiwa ke tengah peta topologi. Parameter 1 adalah node adaptif, parameter 2 adalah apakah akan dianimasikan , dan parameter 3 adalah Padding dari gv dan border } else if(e.kind === 'doubleClickBackground') {//Klik dua kali pada ruang kosong node.s('2d.visible', false);//Setel simpul simpul menjadi tidak terlihat Lihat HT untuk Web Panduan Gaya (http://www.hightopo.com/guide/guide/core/theme/ht-theme-guide.html#ref_style) }});

Perhatikan bahwa s (style) dan a (attr) didefinisikan seperti ini. s adalah beberapa atribut gaya yang telah ditentukan sebelumnya oleh ht, dan a adalah atribut yang disesuaikan oleh pengguna kami. Hasilnya biasanya dipanggil dengan memanggil string ini sesuai dengan can menjadi konstanta atau fungsi, yang sangat fleksibel.

Terakhir, sebagian kecil dibuat. Ketika sebuah situs dipilih, ikon pernapasan merah akan ditampilkan di atas situs untuk menunjukkan situs yang sedang dipilih.

Bagian pernapasan diselesaikan menggunakan fungsi setAnimation dari ht. Sebelum menggunakan fungsi ini, Anda harus menghidupkan sakelar animasi wadah data terlebih dahulu, lalu mengatur animasinya:

 dm.enableAnimation();//Aktifkan fungsi sakelar animasi pada wadah data createRedLight() { var node = new ht.Node(); simpul dari simpul .setSize(1, 1);//Mengatur ukuran node node.setLayer('firstTop');//Mengatur node untuk ditampilkan di lapisan atas gv node.s('2d.visible', false);//The node tidak terlihat node.s( 'select.width', 0);//Batas ketika node dipilih adalah 0 dan node.s tidak terlihat('2d.selectable', false);//Setel atribut ini, node tidak dapat dipilih node.setAnimation({//Untuk detail tentang pengaturan animasi, silakan merujuk ke HT untuk Panduan Animasi Web (http://www.hightopo.com/guide/guide /plugin/animation/ht- animation-guide.html) expandWidth: { properti: lebar,//Setel properti ini, dan jika accessType tidak disetel, lebar di sini dan tinggi di bawah disetel dan diperoleh secara default. Semuanya diperoleh melalui ukuran yang ditetapkan sebelumnya dari: 0,5, //Nilai atribut di awal animasi hingga: 1,//Nilai atribut di akhir animasi berikutnya: collumWidth//Jenis string, menentukan apa yang akan dieksekusi setelahnya animasi saat ini selesai Animasi berikutnya dapat menggabungkan beberapa animasi}, collumWidth: { property: width, from: 1, to: 0.5, next: expandWidth }, expandHeight: { property: height, from: 0.5, to: 1, berikutnya: runtuhHeight }, runtuhHeight: { properti: tinggi, dari: 1, hingga: 0.5, berikutnya: expandHeight }, mulai: [expandWidth, expandHeight]//Array, digunakan untuk menentukan satu atau lebih animasi yang akan dimulai} ) ; dm.add(simpul); simpul kembali;}

Semua kode sudah berakhir!

Demo ini membutuhkan waktu dua hari untuk saya selesaikan, dan saya selalu merasa sedikit tidak ingin melakukannya. Namun, terkadang pemikiran saya tidak dapat diubah, dan memakan banyak waktu, tetapi secara umum saya memperoleh banyak manfaat untuk berpikir bahwa selama saya lulus Cukup gunakan getPoints().push untuk menambahkan poin ke poligon. Setelah meminta bantuan dari master, saya menemukan bahwa metode ini tidak hanya memutar tetapi juga menyebabkan berbagai masalah, misalnya sebelum mendapatkanPoints , Anda harus sudah memiliki titik di poligon. Itu mungkin, tetapi dalam banyak kasus, titik-titik yang diinisialisasi tidak mudah untuk diatur, dan kodenya akan sangat rumit. Titik-titik ditambahkan langsung ke variabel poligon melalui metode addPoint, dan titik-titik tersebut dihubungkan dengan garis lurus secara default. Tidak perlu mengatur segmen, fungsinya sangat bagus.

Selain itu, karena ukuran zoom default ht adalah 20, dan jarak demo saya sangat kecil, tampilan peta jalur kereta bawah tanah juga sangat kecil ketika diperbesar hingga maksimum, jadi saya mengubah atribut zoomMax default ht di htconfig , ubah Nilai ini harus sebelum semua panggilan ht, karena nilai yang ditetapkan di htconfig tidak dapat diubah nanti.

Di atas adalah peta jalur kereta bawah tanah interaktif berdasarkan Kanvas HTML5 yang diperkenalkan editor kepada Anda. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!