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

بواسطة أمجد عجوب, posted in ويب

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

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


في حال كنت قادم من صفحة الفيس بوك لاتنسى الاشتراك بموقع 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>

 

الإعلان

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

  1. التنبيهات: خمس مكتبات برمجية تمكنك من نشر خريطتك على الويب بسهولة – That GIS Guy
  2. التنبيهات: نشر البيانات المكانية باستخدام الجيوسيرفير – That GIS Guy

التعليقات مغلقة.