Dari sifar kepada wira pemetaan web dalam beberapa hari

Sejak dua tahun yang lalu, saya telah menumpukan pada mencipta dokumentasi untuk MapTiler SDK, pustaka JavaScript sumber terbuka yang direka untuk memperluaskan fungsi MapLibre SDK dan memudahkan penggunaannya. Saya berhasrat untuk mencipta sumber yang komprehensif dengan contoh praktikal untuk membina peta web.

Musim panas ini, saya berkongsi dokumentasi melalui satu siri tutorial di media sosial di bawah hashtag #SummerOfMaps. Setiap minggu, saya membincangkan topik baharu dengan tujuh contoh.

Mengikuti siri dari awal hingga akhir menyediakan asas yang kukuh untuk membina peta web, walaupun anda tidak mempunyai pengalaman sebelumnya, jadi saya telah mengumpulkan semuanya di sini di satu tempat untuk anda selesaikan!

Memanaskan badan: Apakah itu peta web dan cara ia berfungsi

Seminggu sebelum pelancaran, saya berkongsi beberapa artikel dan video yang dibuat oleh rakan sekerja saya. Sumber-sumber ini merangkumi asas teori peta web, menerangkan maksudnya, cara ia berfungsi dan asas matematik yang menjadikannya berfungsi.

Jubin peta & piramid: Cara peta web berfungsi | Asas Pemetaan Web #1

Tahap zum & skala peta | Asas Pemetaan Web #2

Lat Long, meter dan piksel dalam peta web | Asas Pemetaan Web #3

Unjuran Peta EPSG: 3857 & 4326 | Asas Pemetaan Web #4

Apakah jubin vektor dan mengapa anda perlu mengambil berat

Cara menambah peta ke web; asasnya

Pada minggu pertama, saya membincangkan asas menambah peta pada halaman web. Satu-satunya prasyarat ialah pemahaman asas tentang JavaScript dan HTML—tiada pengalaman terdahulu dengan peta web atau perpustakaan peta diperlukan.

• Tambahkan peta pada halaman web
• Cara menggunakan MapTiler SDK JS
• Tukar gaya peta
• Cara menukar bahasa label peta lalai
• Paparkan peta rupa bumi 3D
• Cara untuk memusatkan peta berdasarkan lokasi pelawat
• Gerak isyarat kerjasama

Tentukan lokasi dengan penanda

Ciri umum peta web ialah penanda, yang menunjukkan lokasi elemen tertentu. Ia boleh menjadi pin asas, ikon tersuai, imej atau sesuatu yang mendedahkan data tambahan apabila diklik. Penanda juga boleh menyambung ke sumber data luaran untuk memuatkan maklumat secara dinamik. Sepanjang tutorial, anda akan belajar cara melaksanakan setiap pilihan ini.

• Paparkan penanda ringkas pada peta
• Tambahkan ikon pada peta
• Animasikan penanda
• Tambah ikon tersuai dengan penanda
• Lampirkan pop timbul pada tika penanda
• Cara menambah ikon tersuai (PNG) pada lapisan titik
• Cara menambah ikon tersuai (SVG) pada lapisan titik

Mempersembahkan data sebagai titik pada peta

Titik dalam peta web digunakan untuk mewakili elemen data individu. Anda akan belajar cara memaparkan titik pada peta, menggunakan penggayaan berdasarkan atributnya dan mengumpulkannya ke dalam kelompok untuk visualisasi lebih mudah bagi set data yang besar. Selain itu, anda akan meneroka cara menukar data titik kepada peta haba, menjadikannya lebih mudah untuk mengesan corak ketumpatan dan arah aliran sepintas lalu.

• Tunjukkan data titik daripada GeoJSON pada peta
• Animasikan satu titik di sepanjang laluan
• Lapisan titik (penolong mata)
• Lapisan titik berwarna dan bersaiz mengikut sifat (penolong mata)
• Label lapisan titik (pembantu titik)
• Kluster lapisan titik (pembantu titik)
• Lapisan peta haba (pembantu peta haba)

Tambahkan garisan pada peta web anda

Garisan ialah satu lagi elemen utama untuk memaparkan maklumat geografi. Anda akan belajar cara menambah garisan asas daripada GeoJSON, menggunakan kecerunan, mencipta garisan yang menunjukkan kemajuan (cth., menjejak objek bergerak), meneroka jenis garisan yang berbeza dan menggayakannya untuk visualisasi yang lebih baik.

• Tunjukkan data baris daripada GeoJSON pada peta
• Buat garis kecerunan menggunakan ungkapan
• Garis gaya dengan sifat terdorong data
• Kemas kini ciri dalam masa nyata
• Tambah lapisan Talian GPX (pembantu garisan poli)
• Simbol corak sempang garisan (pembantu garisan poli)
• Simbol kabur bercahaya garis luar garis (pembantu poligaris)

Tambahkan poligon pada peta web anda

Polygon ialah satu lagi cara biasa untuk mewakili data geospatial, selalunya digunakan untuk menunjukkan sempadan kawasan atau ketumpatan ciri dalam rantau. Anda akan belajar cara menambah poligon asas, mengisinya dengan corak atau kecerunan warna berdasarkan keamatan data, menyepadukan pop timbul dan menggabungkannya dengan titik dan garisan untuk visualisasi yang kompleks.

• Tunjukkan data poligon daripada GeoJSON pada peta
• Tunjukkan data berbilangGeometri daripada GeoJSON pada peta
• Corak isian poligon (pembantu poligon)
• Simbol tanjakan warna poligon (pembantu poligon)
• Tunjukkan maklumat poligon pada klik
• Buat kesan tuding
• Visualkan kepadatan penduduk

Cara melaraskan kawalan peta

Untuk meningkatkan kebolehgunaan, anda perlu memberikan pengguna anda pilihan kawalan intuitif. Anda akan belajar cara menambah kawalan asas seperti butang zum dan kawalan kecondongan & anjakan, serta ciri yang lebih maju seperti penjejakan lokasi, bar skala, peta minima, carian geokod dan juga butang AR yang membolehkan pengguna melihat peta dalam realiti tambahan pada peranti yang serasi.

• Acara sedia
• Geolocate mengawal cara mendapatkan lokasi pengguna menggunakan GPS
• Paparan kawalan skala
• Cara untuk memaparkan peta minima atau kawalan peta gambaran keseluruhan untuk membantu navigasi peta
• Geokod mengawal cara mencari tempat
• Hasil carian geokod ke negara yang ditentukan
• Bermula dengan peta AR: Paparkan kawalan AR pada peta anda

Menambah sumber data tambahan pada peta web

Walaupun MapTiler menyediakan pelbagai sumber data, mungkin ada kalanya anda perlu memasukkan data anda sendiri. Anda akan belajar cara menambah lapisan tersuai, termasuk lapisan raster, teduhan bukit, jubin vektor, fail GeoJSON setempat dan juga video, memberikan anda kawalan penuh ke atas kandungan peta.

• Tunjukkan imej raster pada peta
• Tambah teduhan bukit
• Tambah sumber WMS
• Tambah sumber jubin vektor
• Lihat GeoJSON tempatan
• Tambah lapisan baharu di bawah label
• Tambahkan video

Buat peta cuaca

Walaupun sering dilihat sebagai niche, peta cuaca amat mudah untuk disepadukan ke dalam tapak web anda dan patut dicuba. Dalam contoh, anda akan belajar cara menambah lapisan untuk kerpasan, data radar, tekanan, suhu dan arah angin. Kami juga akan menyelami kes penggunaan yang lebih maju di mana anda boleh menggabungkan berbilang lapisan untuk mencipta visualisasi yang lebih kaya.

• Lapisan kerpasan cuaca
• Lapisan radar cuaca
• Lapisan tekanan cuaca
• Lapisan suhu cuaca
• Anak panah arah tunjuk angin cuaca
• pop timbul tersuai cuaca
• Penukar lapisan cuaca

Contoh yang kompleks

Pada minggu terakhir, saya mengalihkan tumpuan kepada contoh yang lebih kompleks, menggabungkan konsep daripada tutorial terdahulu dengan teknik baharu. Contoh ini menunjukkan cara membina alatan yang boleh berfungsi sebagai produk berdaya maju minimum untuk aplikasi masa hadapan anda.

• Kawalan profil ketinggian
• Bagaimana untuk mendapatkan ketinggian pada kedudukan tertentu
• Peta choropleth interaktif
• Penapisan titik mengikut harta
• Cara menyegerakkan peta dengan senarai tempat
• Dapatkan maklumat POI dengan klik
• Cara untuk berhijrah/beralih dari Mapbox ke MapTiler

Adakah anda masih mahu lagi?

Anda boleh menemui semua siaran tentang siri #SummerOfMaps di Twitter/X, LinkedIn dan Facebook. Dokumentasi dan rujukan API kami memberikan lebih banyak contoh.

Jika anda lebih suka menggunakan Risalah, OpenLayers atau perpustakaan peta lain, anda akan menemui contoh untuknya dalam dokumentasi juga.

Atas ialah kandungan terperinci Dari sifar kepada wira pemetaan web dalam beberapa hari. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!