خمس مكتبات برمجية ومنصات تمكنك من نشر خريطتك على الويب بسهولة

لابد أنك تحب عرضَ خريطتك على أوسع جمهور, وخرائط “الويب” هي أفضل طريقة لفعل ذلك. هذه المقالة توصّف خمس مكتبات شهيرة لتصميم خرائط “الويب”.

متابعة القراءة “خمس مكتبات برمجية ومنصات تمكنك من نشر خريطتك على الويب بسهولة”

كيف تصمم خريطة ويب – الجزء الأول

رسم الخرائط على شبكة الإنترنت

رسم الخرائط على شبكة الإنترنت هو أكثر من عملية اظهارها. هو أيضا الخدمة التي تمكن المستخدم اختيار ما سوف تظهر الخريطة والتفاعل معها. ظهور الخرائط على شبكة الإنترنت اعطى اتجاها جديدا رئيسيا في رسم الخرائط. حتى وقت قريب اقتصر رسم الخرائط على عدد قليل من الشركات والمعاهد ووكالات رسم الخرائط، مما تطلب أجهزة وبرمجيات باهظة التكلفة ومعقدة نسبيا، فضلا عن رسامي خرائط مهرة ومهندسي جيوماتكس. ولكن حاليا أصبح بامكان الجميع تصميم خرائطهم التفاعلية الخاصة كما سنرى في هذا المثال.


في حال كنت قادم من صفحة الفيس بوك لاتنسى الاشتراك بموقع That GIS Guy حتى تصلك المقالات على الايميل


النتيجة النهائية:

الخريطة التفاعلية

يمكنك قراءة المقالة ومتابعة الفديو لتنفيذ الخطوات:

المتطلبات

  • محرر نصوص. يمكنك استخدام Notepad أو أي محرر نصوص اخر. أنا أستخدم Atom
  • متصحف انترنت. يمكنك استخدام أي متصفح انترنت. أنا أستخدم Chrome في هذا المثال.

أولا – انشاء ملف HTML

  • قم بانشاء ملف نصي فارغ وأعطه اللاحقة HTML
  • قم بكتابة الكود التالي:
  • قم باضافة الـ DIV الذي ستنشأ فيه الخريطة. لاحظ أن الـ ID له هي map

code 1

ثانيا -قم باضافة المكتبات الضرورية

هذه الروابط ستقوم بتحميل بعض المكتبات الضرورية لانشاء الخريطة والتحكم بمظهرها على متصفحك. المكتبة المطلوبة هي Openlayers

code 2

ثالثا -قم باضافة الكود البرمجي التالي JavaScript

هذا الكود يستدعي التوابع الضرورية لانشاء الخريطة من مكتبة Openlayers التي تم اضافتها سابقا.

  • انشاء متحول الخريطة
  • تحديد الطبقات التي سيتم عرضها
  • تحديد مصدر البيانات في هذه الحالةOSM – Open street maps
  • تحديد مركز الخريطة ودرجة التقريب

 

 

code 3

أخيرا – التحكم بأبعاد الخريطة على المتصفح

تستطيع التحكم بأبعاد القسم المتحوي للخريطة عبر تغير هذا القسم

code 4

في حال أعجبتك هذه المقالة لاتنسى أن تشاركها.

الكود الكامل:

<!doctype html>
 <html lang="en">
 <head>
 <link rel="stylesheet" href="https://openlayers.org/en/v4.3.4/css/ol.css" type="text/css">
 <style>
 .map {
 height: 400px;
 width: 100%;
 }
 </style>
 https://openlayers.org/en/v4.3.4/build/ol.js
 <title>My first map</title>
 </head>
 <body>
 <h2>That GIS Guy</h2>
 The best map in the world




var map = new ol.Map({
 target: 'map',
 layers: [
 new ol.layer.Tile({
 source: new ol.source.OSM()
 })
 ],
 view: new ol.View({
 center: ol.proj.fromLonLat([37.41, 8.82]),
 zoom: 4
 })
 });

</body>
 </html>

 

بالفيديو: الخرائط التي نراها على الانترنت تعطي تصور خاطىء عن الواقع بسبب الاسقاطات المستخدمة

ماهو الاسقاط؟

إسقاط الخرائط هو أي طريقة تستخدم في علم رسم الخرائط من أجل إظهار السطح المنحني ثنائي البعد للأرض بشكل مستوي.

المشكلة؟

التشوهات التي تحدث بسبب ذلك. أشهر الاسقاطات المستخدمة في الويب هي مركيتور. والذي يسبب تشوهات في عرض المساحات كلما ابتعدنا عن خط الاستواء. شاهد الفديو المرفق

تحقيق المساحة الصحيحة أمر عظيم الأهمية في كثير من الخرائط و بخاصة تلك الخرائط التي ترسم لكي تبين التوزيعات المكانية لظاهرة أو ظاهرات جغرافية مختلفة، كتوزيع السكان أو الأراضي الزراعية

برهن كارل فريدريش غاوس في مبرهنة إغريغوم أنه لا يمكن تمثل الكرة على المستوي بدون تشوه. وبما أن أي طريقة لتمثيل سطح كروي على مستوي هو إسقاط خريطة، عليه يكون أي إسقاط خريطة مشوه. إن كل إسقاط للخرائط يتشوه بشكل مختلف، وتكون دراسة إسقاط الخرائط هي دراسة خصائص التشويه الذي تتعرض له.

اذا لابد لنا للاسف المساومة بين التشوهات في الشكل والمساحة عندما نعرض أي خريطة على سطح مستوي

Mercator_projection_ar.png