1. Produse
  2.   Imagine
  3.   Node.js
  4.   StaticMaps
 
  

Biblioteca cu sursă deschisă pentru crearea de hărți statice în Node.js

Biblioteca principală Node.js permite generarea de hărți statice, precum și urmărirea locațiilor, afișarea datelor geografice, furnizarea contextului vizual și multe altele prin intermediul API-ului JS Open Source.

În calitate de dezvoltator de software, sunteți în permanență în căutarea unor instrumente și tehnologii inovatoare pentru a vă simplifica fluxul de lucru și a vă aduce ideile la viață. În lumea cartografierii și dezvoltării geospațiale, un astfel de instrument care a câștigat o tracțiune semnificativă este StaticMaps, o bibliotecă open-source dezvoltată de Stephan Georg. Este o bibliotecă open source Node.js concepută pentru a ajuta dezvoltatorii de software să genereze cu ușurință imagini statice ale hărților. Indiferent dacă construiți o aplicație care are nevoie de hărți pentru urmărirea locațiilor, afișarea datelor geografice sau pur și simplu furnizarea de context vizual, StaticMaps oferă o modalitate simplă, dar puternică de a crea hărți de înaltă calitate, personalizabile, fără a necesita biblioteci de hărți interactive precum Leaflet sau Google Maps. Cu integrare simplă și opțiuni puternice de personalizare, este un instrument valoros pentru dezvoltatorii care caută o vizualizare geografică eficientă.

În esență, StaticMaps generează imagini de hărți pe baza parametrilor furnizați de utilizator, cum ar fi locația, nivelul de zoom, marcatorii și chiar liniile pentru rute. Spre deosebire de hărțile dinamice, interactive, creează imagini non-interactive care pot fi încorporate în aplicații web sau exportate pentru alte utilizări. Acest lucru face biblioteca ideală pentru cazurile de utilizare în care hărțile interactive nu sunt necesare și doriți să economisiți lățime de bandă, apeluri API și complexitate. Biblioteca funcționează cu plăci OpenStreetMap (OSM), făcându-l atât open source, cât și gratuit de utilizat, fără a se baza pe sistemele proprietare sau pe API-uri costisitoare. Cu documentația sa extinsă și opțiunile personalizabile, StaticMaps este o alegere excelentă pentru dezvoltatorii care doresc să-și ducă aplicațiile de cartografiere și geospațiale la următorul nivel.

Previous Next

Noțiuni introductive cu StaticMaps

Modul recomandat de a instala StaticMaps este utilizarea NPM. Vă rugăm să utilizați următoarea comandă pentru o instalare fără probleme.

Instalați StaticMaps prin NPM

npm i staticmaps

Generare de hărți personalizabile în Node.js

Una dintre caracteristicile principale ale bibliotecii StaticMaps open source este capacitatea sa de a genera hărți foarte personalizabile în cadrul aplicațiilor Node.js. Dezvoltatorii de software pot specifica dimensiunile imaginii, coordonatele centrale, nivelurile de zoom, straturi de plăci și multe altele. Acești parametri oferă dezvoltatorilor un control fin asupra aspectului hărții. În următorul exemplu de cod, harta este centrată în jurul Berlinului, Germania, cu un nivel de zoom de 12 și o dimensiune a imaginii de 800x600 pixeli. Puteți ajusta cu ușurință acești parametri în funcție de nevoile aplicației dvs.

Cum se generează o hartă de bază în aplicațiile 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));

Marcatori pentru indicarea locațiilor în Node.js

StaticMaps oferă posibilitatea de a adăuga marcatori pe o hartă. Marcatoarele sunt utile pentru a evidenția anumite locații, cum ar fi punctele de interes, locațiile utilizatorilor sau alte locuri importante. Biblioteca open source StaticMaps facilitează pentru dezvoltatorii de software să adauge marcatori pentru a indica o anumită locație în aplicațiile lor Node.js. Următorul exemplu demonstrează cum să adăugați un marcator personalizat (folosind o imagine externă) la o locație de pe hartă. Puteți specifica dimensiunea și poziția marcatorului, precum și puteți utiliza pictograme diferite pentru diferite locații.

Cum să adăugați un marcator pe o hartă pentru locația punctului în aplicațiile 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));

Suport pentru mai multe formate de ieșire

Biblioteca StaticMaps acceptă în principal PNG ca format de ieșire, dar biblioteca de generare a imaginilor de bază (Sharp) vă permite să convertiți imagini în diferite alte formate de fișiere populare, cum ar fi JPEG, GIF sau chiar PDF. Acest lucru poate fi util atunci când integrați hărți în diferite tipuri de documente sau media. Comutarea între formate este simplă, deoarece trebuie doar să modificați extensia fișierului atunci când salvați harta. Iată un exemplu care arată cum se poate realiza în aplicațiile Node.js.

Cum se salvează harta în format JPEG prin API-ul JavaScript?

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

Polilinii pentru trasarea rutelor sau a granițelor

Poliliniile sunt esențiale pentru vizualizarea căilor sau limitelor pe o hartă. Puteți folosi StaticMaps pentru a desena polilinii, ceea ce îl face o alegere excelentă pentru aplicațiile care afișează rute, cum ar fi serviciile de livrare sau aplicațiile de urmărire a fitnessului. Următorul exemplu arată că o polilinie roșie este desenată între mai multe coordonate pentru a reprezenta o rută. Puteți ajusta cu ușurință culoarea și lățimea poliliniei pentru a se potrivi stilului aplicației dvs.

Cum să adăugați polilinii la o hartă în mediul 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));
 Română