1. Termékek
  2.   Kép
  3.   Node.js
  4.   StaticMaps
 
  

Nyílt forráskódú könyvtár statikus térképalkotásokhoz a Node.js-ben

A vezető Node.js könyvtár lehetővé teszi statikus térképek létrehozását, valamint helyek nyomon követését, földrajzi adatok megjelenítését, vizuális kontextus biztosítását és egyebeket a nyílt forráskódú JS API-n keresztül.

Szoftverfejlesztőként folyamatosan keresi az innovatív eszközöket és technológiákat a munkafolyamat egyszerűsítéséhez és ötletei megvalósításához. A térképezés és térinformatikai fejlesztés világában az egyik ilyen eszköz, amely jelentős teret nyert, a StaticMaps, a Stephan Georg által fejlesztett nyílt forráskódú könyvtár. Ez egy nyílt forráskódú Node.js könyvtár, amelynek célja, hogy segítse a szoftverfejlesztőket statikus térképképek létrehozásában. Akár olyan alkalmazást épít, amelyhez térképekre van szüksége a helyek nyomon követéséhez, földrajzi adatok megjelenítéséhez vagy egyszerűen vizuális kontextus biztosításához, a StaticMaps egyszerű, de hatékony módot kínál kiváló minőségű, testreszabható térképek létrehozására anélkül, hogy interaktív térképkönyvtárak, például a Leaflet vagy a Google Maps szüksége lenne. Egyszerű integrációjával és hatékony testreszabási lehetőségeivel értékes eszköz a hatékony földrajzi vizualizációt kereső fejlesztők számára.

Lényegében a StaticMaps térképképeket hoz létre a felhasználó által megadott paraméterek, például a hely, a nagyítási szint, a jelölők és az útvonalak vonalai alapján. A dinamikus, interaktív térképekkel ellentétben nem interaktív képeket hoz létre, amelyek beágyazhatók webalkalmazásokba vagy exportálhatók más célokra. Ez ideálissá teszi a könyvtárat olyan esetekben, amikor nincs szükség interaktív térképekre, és meg kívánja spórolni a sávszélességen, az API-hívásokon és a bonyolultságon. A könyvtár OpenStreetMap (OSM) csempékkel működik, így nyílt forráskódú és ingyenesen használható, szabadalmaztatott rendszerekre vagy költséges API-kra való támaszkodás nélkül. Kiterjedt dokumentációjával és testreszabható lehetőségeivel a StaticMaps kiváló választás azoknak a fejlesztőknek, akik térképészeti és térinformatikai alkalmazásaikat szeretnék magasabb szintre emelni.

Previous Next

A StaticMaps első lépései

A StaticMaps telepítésének javasolt módja az NPM használata. Kérjük, használja a következő parancsot a zökkenőmentes telepítés érdekében.

Telepítse a StaticMaps alkalmazást NPM-en keresztül

npm i staticmaps 

Testreszabható térképgenerálás a Node.js-ben

A nyílt forráskódú StaticMaps könyvtár egyik elsődleges jellemzője, hogy képes nagymértékben testreszabható térképeket generálni a Node.js alkalmazásokon belül. A szoftverfejlesztők megadhatják a kép méreteit, középkoordinátáit, nagyítási szintjeit, csempe rétegeit és még sok mást. Ezek a paraméterek lehetővé teszik a fejlesztők számára a térkép megjelenésének pontos szabályozását. A következő kódpéldában a térkép a németországi Berlin körül helyezkedik el, 12-es nagyítási szinttel és 800x600 képpontos képmérettel. Ezeket a paramétereket egyszerűen beállíthatja az alkalmazás igényei szerint.

Hogyan lehet alaptérképet létrehozni a Node.js alkalmazásokon belül?

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

Mutatóhelyek jelölői a Node.js-ben

A StaticMaps lehetővé teszi jelölők hozzáadását a térképhez. A jelölők hasznosak bizonyos helyek, például érdekes helyek, felhasználói helyek vagy más fontos helyek kiemelésére. A nyílt forráskódú StaticMaps könyvtár megkönnyíti a szoftverfejlesztők számára, hogy jelölőket adhassanak hozzá a Node.js-alkalmazásokon belüli adott hely megjelölésére. A következő példa bemutatja, hogyan adhat hozzá egyéni jelölőt (külső kép használatával) egy helyhez a térképen. Megadhatja a jelölő méretét és helyzetét, valamint különböző ikonokat használhat a különböző helyekhez.

Hogyan adhatunk hozzá jelölőt a Node.js alkalmazásokon belüli térképhez a pont helyére?

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

Több kimeneti formátum támogatása

A StaticMaps könyvtár elsősorban a PNG-t támogatja kimeneti formátumként, de az alapul szolgáló képgeneráló könyvtár (Sharp) lehetővé teszi a képek más népszerű fájlformátumokká, például JPEG-be, GIF-be vagy akár PDF-be való konvertálását. Ez hasznos lehet, ha térképeket integrál különböző típusú dokumentumokba vagy médiákba. A formátumok közötti váltás egyszerű, hiszen csak a fájl kiterjesztését kell módosítani a térkép mentésekor. Íme egy példa, amely bemutatja, hogyan érhető el ez a Node.js alkalmazásokon belül.

Hogyan lehet térképet menteni JPEG formátumban JavaScript API-n keresztül?

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

Vonalvonalak útvonalak vagy határvonalak rajzolásához

A vonalláncok elengedhetetlenek az utak vagy határok térképen való megjelenítéséhez. A StaticMaps segítségével vonalláncokat rajzolhat, így nagyszerű választás lehet az útvonalakat megjelenítő alkalmazásokhoz, például a kézbesítési szolgáltatásokhoz vagy a fitneszkövető alkalmazásokhoz. A következő példa azt mutatja, hogy egy piros vonallánc több koordináta közé rajzolódik az útvonal ábrázolásához. Könnyedén beállíthatja a vonallánc színét és szélességét az alkalmazás stílusának megfelelően.

Hogyan adhatunk vonalláncokat egy térképhez a Node.js környezetben?

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