Библиотека с отворен код за създаване на статични карти в Node.js

Първи стъпки със StaticMaps

Препоръчителният начин за инсталиране на StaticMaps е използването на NPM. Моля, използвайте следната команда за гладка инсталация.

npm i staticmaps 

Персонализируемо генериране на карти в Node.js

Една от основните характеристики на библиотеката StaticMaps с отворен код е нейната способност да генерира високо адаптивни карти в приложения Node.js. Разработчиците на софтуер могат да определят размерите на изображението, централните координати, нивата на мащабиране, слоевете с плочки и много други. Тези параметри дават на разработчиците фин контрол върху външния вид на картата. В следния пример с код картата е центрирана около Берлин, Германия, с ниво на мащабиране 12 и размер на изображението 800x600 пиксела. Можете лесно да регулирате тези параметри според нуждите на вашето приложение.

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

Маркери за посочване на местоположения в Node.js

StaticMaps предоставя възможност за добавяне на маркери към карта. Маркерите са полезни за подчертаване на конкретни местоположения, като интересни места, потребителски местоположения или други важни места. Библиотеката StaticMaps с отворен код улеснява разработчиците на софтуер да добавят маркери за посочване на конкретно местоположение в техните 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));

Поддръжка на множество изходни формати

Библиотеката StaticMaps поддържа основно PNG като изходен формат, но основната библиотека за генериране на изображения (Sharp) ви позволява да конвертирате изображения в различни други популярни файлови формати като JPEG, GIF или дори PDF. Това може да бъде удобно при интегриране на карти в различни видове документи или медии. Превключването между форматите е лесно, тъй като трябва само да промените разширението на файла, когато запазвате картата. Ето един пример, който показва как да го постигнете в приложенията Node.js.

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

Полилинии за чертане на маршрути или граници

Полилиниите са от съществено значение за визуализиране на пътеки или граници на карта. Можете да използвате StaticMaps, за да рисувате полилинии, което го прави чудесен избор за приложения, които показват маршрути, като услуги за доставка или приложения за проследяване на фитнес. Следващият пример показва, че червена полилиния е начертана между няколко координати, за да представи маршрут. Можете лесно да регулирате цвета и ширината на полилинията, за да отговарят на стила на вашето приложение.

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