مكتبة مفتوحة المصدر لإنشاء الخرائط الثابتة في 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));