1. Produk
  2.   Imej
  3.   Node.js
  4.   StaticMaps
 
  

Pustaka Sumber Terbuka untuk Penciptaan Peta Statik dalam Node.js

Perpustakaan Node.js terkemuka membolehkan Menjana Peta Statik serta Menjejaki Lokasi, Memaparkan Data Geografi, Menyediakan Konteks Visual dan banyak lagi melalui Open Source JS API.

Sebagai pembangun perisian, anda sentiasa mencari alatan dan teknologi yang inovatif untuk menyelaraskan aliran kerja anda dan menghidupkan idea anda. Dalam dunia pemetaan dan pembangunan geospatial, satu alat sedemikian yang telah mendapat daya tarikan yang ketara ialah StaticMaps, perpustakaan sumber terbuka yang dibangunkan oleh Stephan Georg. Ia ialah perpustakaan Node.js sumber terbuka yang direka untuk membantu pembangun perisian menjana imej peta statik dengan mudah. Sama ada anda sedang membina aplikasi yang memerlukan peta untuk menjejak lokasi, memaparkan data geografi atau hanya menyediakan konteks visual, StaticMaps menyediakan cara yang mudah tetapi berkuasa untuk mencipta peta yang berkualiti tinggi dan boleh disesuaikan tanpa memerlukan perpustakaan peta interaktif seperti Risalah atau Peta Google. Dengan penyepaduan mudah dan pilihan penyesuaian yang berkuasa, ia adalah alat yang berharga untuk pembangun yang mencari visualisasi geografi yang cekap.

Pada terasnya, StaticMaps menjana imej peta berdasarkan parameter yang disediakan oleh pengguna, seperti lokasi, tahap zum, penanda dan juga garisan untuk laluan. Tidak seperti peta interaktif yang dinamik, ia mencipta imej bukan interaktif yang boleh dibenamkan ke dalam aplikasi web atau dieksport untuk kegunaan lain. Ini menjadikan perpustakaan sesuai untuk kes penggunaan di mana peta interaktif tidak diperlukan dan anda ingin menjimatkan lebar jalur, panggilan API dan kerumitan. Perpustakaan berfungsi dengan jubin OpenStreetMap (OSM), menjadikannya sumber terbuka dan bebas untuk digunakan, tanpa bergantung pada sistem proprietari atau API yang mahal. Dengan dokumentasi yang luas dan pilihan yang boleh disesuaikan, StaticMaps ialah pilihan yang sangat baik untuk pembangun yang ingin membawa pemetaan dan aplikasi geospatial mereka ke peringkat seterusnya.

Previous Next

Bermula dengan StaticMaps

Cara yang disyorkan untuk memasang StaticMaps adalah menggunakan NPM. Sila gunakan arahan berikut untuk pemasangan yang lancar.

Pasang StaticMaps melalui NPM

npm i staticmaps

Penjanaan Peta Boleh Disesuaikan dalam Node.js

Salah satu ciri utama perpustakaan StaticMaps sumber terbuka ialah keupayaannya untuk menjana peta yang sangat boleh disesuaikan dalam aplikasi Node.js. Pembangun Perisian boleh menentukan dimensi imej, koordinat tengah, tahap zum, lapisan jubin dan banyak lagi. Parameter ini memberikan pembangun kawalan terperinci ke atas penampilan peta. Dalam contoh kod berikut, peta berpusat di sekitar Berlin, Jerman, dengan tahap zum 12 dan saiz imej 800x600 piksel. Anda boleh melaraskan parameter ini dengan mudah berdasarkan keperluan aplikasi anda.

Bagaimana untuk Menjana Peta Asas di dalam Apl Node.js?

const StaticMaps = require('staticmaps');

// Create a new instance of StaticMaps with a specified width and height
const map = new StaticMaps({ width: 800, height: 600 });

// Set the map center and zoom level
map.center = [13.404954, 52.520008]; // Coordinates for Berlin
map.zoom = 12;

// Render and save the map as a PNG file
map.render()
  .then(() => map.image.save('basic_map.png'))
  .catch(err => console.error('Error generating map:', err));

Penanda untuk Penunjuk Lokasi dalam Node.js

StaticMaps menyediakan keupayaan untuk menambah penanda pada peta. Penanda berguna untuk menyerlahkan lokasi tertentu, seperti tempat menarik, lokasi pengguna atau tempat penting lain. Pustaka StaticMaps sumber terbuka memudahkan pembangun perisian menambah penanda untuk menunjukkan lokasi tertentu dalam aplikasi Node.js mereka. Contoh berikut menunjukkan cara menambah penanda tersuai (menggunakan imej luaran) pada lokasi pada peta. Anda boleh menentukan saiz dan kedudukan penanda, serta menggunakan ikon berbeza untuk pelbagai lokasi.

Bagaimana untuk Menambah Penanda pada Peta untuk Lokasi Titik di dalam Apl Node.js?

// Create a marker object
const marker = {
  coord: [13.405, 52.52], // Berlin coordinates
  img: 'https://path-to-marker-icon.com/marker.png', // Custom marker image
  height: 32,
  width: 32
};

// Add the marker to the map
map.addMarker(marker);

// Render and save the map
map.render()
  .then(() => map.image.save('map_with_marker.png'))
  .catch(err => console.log(err));

Sokongan Format Output Berbilang

Pustaka StaticMaps terutamanya menyokong PNG sebagai format output, tetapi perpustakaan penjanaan imej asas (Sharp) membolehkan anda menukar imej kepada pelbagai format fail popular lain seperti JPEG, GIF, atau pun PDF. Ini boleh berguna apabila menyepadukan peta ke dalam pelbagai jenis dokumen atau media. Bertukar antara format adalah mudah, kerana anda hanya perlu menukar sambungan fail apabila menyimpan peta. Berikut ialah contoh yang menunjukkan cara untuk mencapainya dalam aplikasi Node.js.

Bagaimana untuk Menyimpan Peta dalam Format JPEG melalui API JavaScript?

map.render()
  .then(() => map.image.save('output_map.jpg'))  // Saving as a JPEG
  .catch(err => console.log('Error saving as JPEG:', err));

Polylines untuk Melukis Laluan atau Sempadan

Polylines adalah penting untuk menggambarkan laluan atau sempadan pada peta. Anda boleh menggunakan StaticMaps untuk melukis polylines, menjadikannya pilihan yang bagus untuk aplikasi yang memaparkan laluan, seperti perkhidmatan penghantaran atau apl penjejakan kecergasan. Contoh berikut menunjukkan, garis poli merah dilukis antara beberapa koordinat untuk mewakili laluan. Anda boleh melaraskan warna dan lebar garis poli dengan mudah agar sesuai dengan gaya aplikasi anda.

Bagaimana untuk Menambah Polylines pada Peta dalam Persekitaran Node.js?

// Define a polyline with multiple coordinates
const polyline = {
  coords: [
    [13.405, 52.52], // Starting point in Berlin
    [13.4, 52.51],   // Intermediate point
    [13.42, 52.49]   // Ending point
  ],
  color: '#FF0000', // Red line
  width: 3          // Line width in pixels
};

// Add the polyline to the map
map.addLine(polyline);

// Render and save the map
map.render()
  .then(() => map.image.save('map_with_polyline.png'))
  .catch(err => console.error('Error rendering polyline map:', err));
 Melayu