Thư viện nguồn mở để tạo bản đồ tĩnh trong Node.js

Bắt đầu với StaticMaps

Cách được khuyến nghị để cài đặt StaticMaps là sử dụng NPM. Vui lòng sử dụng lệnh sau để cài đặt suôn sẻ.

npm i staticmaps 

Tạo bản đồ tùy chỉnh trong Node.js

Một trong những tính năng chính của thư viện StaticMaps nguồn mở là khả năng tạo bản đồ có thể tùy chỉnh cao bên trong các ứng dụng Node.js. Các nhà phát triển phần mềm có thể chỉ định kích thước hình ảnh, tọa độ trung tâm, mức thu phóng, lớp ô và nhiều hơn nữa. Các tham số này cung cấp cho các nhà phát triển quyền kiểm soát chi tiết đối với giao diện của bản đồ. Trong ví dụ mã sau, bản đồ được tập trung xung quanh Berlin, Đức, với mức thu phóng là 12 và kích thước hình ảnh là 800x600 pixel. Bạn có thể dễ dàng điều chỉnh các tham số này dựa trên nhu cầu của ứng dụng.

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));

Các điểm đánh dấu để chỉ vị trí trong Node.js

StaticMaps cung cấp khả năng thêm các điểm đánh dấu vào bản đồ. Các điểm đánh dấu hữu ích để làm nổi bật các vị trí cụ thể, chẳng hạn như điểm tham quan, vị trí của người dùng hoặc các điểm quan trọng khác. Thư viện StaticMaps nguồn mở giúp các nhà phát triển phần mềm dễ dàng thêm các điểm đánh dấu để chỉ ra vị trí cụ thể bên trong các ứng dụng Node.js của họ. Ví dụ sau đây minh họa cách thêm điểm đánh dấu tùy chỉnh (sử dụng hình ảnh bên ngoài) vào một vị trí trên bản đồ. Bạn có thể chỉ định kích thước và vị trí của điểm đánh dấu, cũng như sử dụng các biểu tượng khác nhau cho các vị trí khác nhau.

// 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));

Hỗ trợ nhiều định dạng đầu ra

Thư viện StaticMaps chủ yếu hỗ trợ PNG làm định dạng đầu ra, nhưng thư viện tạo hình ảnh cơ bản (Sharp) cho phép bạn chuyển đổi hình ảnh thành nhiều định dạng tệp phổ biến khác như JPEG, GIF hoặc thậm chí là PDF. Điều này có thể hữu ích khi tích hợp bản đồ vào nhiều loại tài liệu hoặc phương tiện khác nhau. Việc chuyển đổi giữa các định dạng rất đơn giản vì bạn chỉ cần thay đổi phần mở rộng tệp khi lưu bản đồ. Sau đây là ví dụ cho thấy cách thực hiện bên trong các ứng dụng Node.js.

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

Polylines để Vẽ Tuyến Đường hoặc Ranh Giới

Polylines rất cần thiết để trực quan hóa các đường dẫn hoặc ranh giới trên bản đồ. Bạn có thể sử dụng StaticMaps để vẽ polylines, khiến nó trở thành lựa chọn tuyệt vời cho các ứng dụng hiển thị tuyến đường, như dịch vụ giao hàng hoặc ứng dụng theo dõi sức khỏe. Ví dụ sau đây cho thấy, một polyline màu đỏ được vẽ giữa một số tọa độ để biểu diễn một tuyến đường. Bạn có thể dễ dàng điều chỉnh màu sắc và chiều rộng của polyline để phù hợp với phong cách ứng dụng của mình.

// 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));