ספריית קוד פתוח ליצירת מפות סטטיות ב-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));