1. Produktai
  2.   Vaizdas
  3.   Node.js
  4.   StaticMaps
 
  

Atvirojo kodo biblioteka statinių žemėlapių kūrimui Node.js

Pirmaujanti Node.js biblioteka leidžia generuoti statinius žemėlapius, taip pat stebėti vietas, rodyti geografinius duomenis, teikti vaizdinį kontekstą ir daugiau naudojant atvirojo kodo JS API.

Kaip programinės įrangos kūrėjas, jūs nuolat ieškote naujoviškų įrankių ir technologijų, kad supaprastintumėte darbo eigą ir įgyvendintumėte idėjas. Žemėlapių sudarymo ir geografinės erdvės kūrimo pasaulyje vienas iš tokių įrankių, kurie sulaukė didelio traukos, yra Stephano Georgo sukurta atvirojo kodo biblioteka StaticMaps. Tai atvirojo kodo Node.js biblioteka, skirta padėti programinės įrangos kūrėjams lengvai generuoti statinius žemėlapio vaizdus. Nesvarbu, ar kuriate programą, kuriai reikalingi žemėlapiai vietoms sekti, geografiniams duomenims rodyti ar tiesiog vizualiniam kontekstui pateikti, „StaticMaps“ yra paprastas, bet galingas būdas sukurti aukštos kokybės, tinkinamus žemėlapius, nereikalaujant interaktyvių žemėlapių bibliotekų, tokių kaip „Leaflet“ ar „Google Maps“. Dėl paprasto integravimo ir galingų tinkinimo parinkčių tai yra vertingas įrankis kūrėjams, ieškantiems veiksmingos geografinės vizualizacijos.

Pagrinde StaticMaps generuoja žemėlapio vaizdus pagal naudotojo pateiktus parametrus, pvz., vietą, mastelio keitimo lygį, žymeklius ir net maršrutų linijas. Skirtingai nuo dinaminių, interaktyvių žemėlapių, jis sukuria neinteraktyvius vaizdus, ​​​​kurius galima įterpti į žiniatinklio programas arba eksportuoti kitiems tikslams. Dėl to biblioteka idealiai tinka naudoti, kai interaktyvūs žemėlapiai yra nereikalingi ir norite sutaupyti pralaidumo, API skambučių ir sudėtingumo. Biblioteka veikia su OpenStreetMap (OSM) plytelėmis, todėl ja galima ir atvirojo kodo, ir laisvai naudotis, nepasikliaujant patentuotomis sistemomis ar brangiomis API. „StaticMaps“, turinti išsamią dokumentaciją ir pritaikomas parinktis, yra puikus pasirinkimas kūrėjams, norintiems perkelti savo žemėlapių ir geografines programas į kitą lygį.

Previous Next

Darbo su StaticMaps pradžia

Rekomenduojamas būdas įdiegti „StaticMaps“ yra naudoti NPM. Norėdami sklandžiai įdiegti, naudokite šią komandą.

Įdiekite „StaticMaps“ naudodami NPM

npm i staticmaps 

Tinkinamas žemėlapių generavimas naudojant Node.js

Viena iš pagrindinių atvirojo kodo StaticMaps bibliotekos ypatybių yra jos gebėjimas generuoti labai tinkinamus žemėlapius Node.js programose. Programinės įrangos kūrėjai gali nurodyti vaizdo matmenis, centro koordinates, mastelio keitimo lygius, plytelių sluoksnius ir daug daugiau. Šie parametrai leidžia kūrėjams tiksliai valdyti žemėlapio išvaizdą. Toliau pateiktame kodo pavyzdyje žemėlapis sutelktas aplink Berlyną, Vokietijoje, mastelio keitimo lygis yra 12, o vaizdo dydis – 800 x 600 pikselių. Šiuos parametrus galite lengvai koreguoti pagal savo programos poreikius.

Kaip sugeneruoti pagrindinį žemėlapį Node.js programose?

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

Nuode.js vietovių žymekliai

StaticMaps suteikia galimybę pridėti žymeklius prie žemėlapio. Žymekliai yra naudingi norint paryškinti konkrečias vietas, pvz., lankytinas vietas, naudotojų vietas ar kitas svarbias vietas. Atvirojo kodo „StaticMaps“ biblioteka leidžia programinės įrangos kūrėjams lengvai pridėti žymeklius, kad nurodytų konkrečią vietą jų Node.js programose. Toliau pateiktame pavyzdyje parodyta, kaip pridėti pasirinktinį žymeklį (naudojant išorinį vaizdą) prie vietos žemėlapyje. Galite nurodyti žymeklio dydį ir padėtį, taip pat įvairioms vietoms naudoti skirtingas piktogramas.

Kaip pridėti žymeklį prie taško vietos žemėlapio Node.js programose?

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

Kelių išvesties formatų palaikymas

StaticMaps biblioteka visų pirma palaiko PNG kaip išvesties formatą, tačiau pagrindinė vaizdų generavimo biblioteka (Sharp) leidžia konvertuoti vaizdus į įvairius kitus populiarius failų formatus, tokius kaip JPEG, GIF ar net PDF. Tai gali būti patogu integruojant žemėlapius į įvairių tipų dokumentus ar laikmenas. Perjungti formatus paprasta, nes išsaugant žemėlapį tereikia pakeisti failo plėtinį. Štai pavyzdys, parodantis, kaip tai pasiekti Node.js programose.

Kaip išsaugoti žemėlapį JPEG formatu naudojant JavaScript API?

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

Kelio linijos maršrutams arba riboms braižyti

Kelio linijos yra būtinos norint vizualizuoti kelius ar ribas žemėlapyje. Galite naudoti „StaticMaps“ polilinijoms braižyti, todėl tai puikus pasirinkimas programoms, kurios rodo maršrutus, pvz., pristatymo paslaugoms ar kūno rengybos stebėjimo programoms. Toliau pateiktame pavyzdyje parodyta, kad tarp kelių koordinačių nubrėžiama raudona linija, kuri vaizduoja maršrutą. Galite lengvai reguliuoti polilinijos spalvą ir plotį, kad atitiktų jūsų programos stilių.

Kaip pridėti polilines į žemėlapį Node.js aplinkoje?

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