مسح لأفضل أدوات رسم الخرائط عبر الإنترنت لمطوري الويب: خارطة الطريق إلى خرائط الطريق

لا يوجد شيء يضاهي الخريطة الجيدة والمفيدة.

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

قليلا من التاريخ

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

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

لكن رسم خرائط نظم المعلومات الجغرافية ليس بالأمر السهل. يتطلب العديد من التقنيات من جانب الخادم والمعايير والبروتوكولات الجغرافية المكانية ، جنبًا إلى جنب مع تطبيقاتها. يتطلب فهم البيانات الجغرافية المكانية وإسقاطات الخرائط ، ومعرفة كيفية جمع البيانات ، وكيفية عرض البيانات ، والألوان التي يجب استخدامها ، وكيفية تعميم البيانات على مقاييس محددة ، وكيفية وضع الملصقات على الخريطة ، وكيفية إعداد الخادم الذي سيخدم الخرائط ، وكيفية استخدام قاعدة البيانات المكانية ، وما إلى ذلك. GIS مليء بالاختصارات ، مثل WMS و WFS و EPSG و CRS و SLD و GML و TMS ، على سبيل المثال لا الحصر ، ولمعرفتها وفهمها ، تحتاج إلى قراءة الكتب والأوراق الأكاديمية والمقالات.

تطور رسم الخرائط على الإنترنت

أظهرت خرائط الويب الأولى عادةً صورة خريطة واحدة صغيرة جدًا. في ذلك الوقت ، تم تنفيذ التحريك عن طريق تحريك خطوة واحدة ، عادةً بنصف حجم الخريطة ، في واحد من ثمانية اتجاهات بوصلة محتملة - N ، NW ، W ، SW ، S ، SE ، E ، NE. بعد أن ينقر المستخدم على زر التحريك أو التكبير / التصغير ، يجب عرض صورة جديدة كاملة على خادم الخريطة ، وتحميلها عبر الشبكة ، ثم معالجتها بواسطة المتصفح. بسبب قيود التكنولوجيا ، احتلت الخرائط جزءًا صغيرًا جدًا من صفحة الويب بأكملها. للحصول على تفاعل أفضل ، تطلبت الخرائط المبكرة مكونات إضافية مثل Flash أو المكونات الإضافية الملائمة استنادًا إلى Java ، أو حتى ActiveX ، والتي تعمل فقط في Internet Explorer.

قلبت Google عالم رسم الخرائط رأسًا على عقب عندما قدمت خرائط Google في عام 2005. ومن بين ابتكاراتها ، قدمت Google التحريك المستمر عن طريق السحب. كان حلهم هو عرض خريطة مقطعة إلى العديد من الصور المربعة الأصغر تسمى "البلاط". تم عرض هذه المربعات وعرضها من "خادم مربعات الخرائط" ، وعادة ما تكون 256 × 256 بكسل. لا يتطلب التكبير / التصغير والتحريك الآن سوى تحميل مربعات خرائط جديدة بدلاً من إعادة تحميل صفحة الويب بأكملها. وكانت النتيجة خريطة مرئية أكبر تغطي أكثر من نصف نافذة المتصفح ، وقدمت تجربة سلسة لاستكشاف الخريطة. نظرًا لإمكانية "الانزلاق" على الخريطة باستخدام وظائف التكبير / التصغير والتحريك السلس ، فقد أُطلق على هذه الخرائط الجديدة اسم "الخرائط الزلقة". سمحت Google أيضًا بالبرمجة النصية ، بحيث يمكن للمستخدمين وضع خرائط Google على مواقع الويب الخاصة بهم وإضافة بياناتهم الخاصة إلى الخريطة. نتج عن ذلك صياغة مصطلح جديد آخر: "مجموعات الخرائط".

فجأة ، أصبحت الخرائط على الإنترنت شائعة ؛ لإضافة خريطة جميلة إلى موقع الويب الخاص بك ، لم تعد بحاجة لأن تكون رسام خرائط أو متخصصًا في نظم المعلومات الجغرافية. على أجنحة حركة "Web 2.0" ، وبناءً على التقنيات الحديثة مثل HTML5 و CSS3 و SVG ، التي تتيح إنشاء محتوى تفاعلي بسهولة ، تعيش الخرائط التفاعلية الآن نهضة جديدة.

بيانات الخريطة

كما ذكرنا سابقًا ، استندت الخرائط المبكرة عبر الإنترنت إلى مجموعات من بيانات نظم المعلومات الجغرافية وقواعدها الجغرافية المكانية. لم يكن لدى الكثير من الأشخاص إمكانية الوصول إلى هذه البيانات ، ناهيك عن سعرها. غيّرت Google ومجموعات بيانات مشروع OpenStreetMap (OSM) ذلك. قاعدة بيانات Google خاصة وتأتي مع قيود ، في حين أن OSM مستوحاة من مفهوم Wikipedia ، كمشروع تعاوني لإنشاء خريطة مجانية للعالم. تم إنشاء OpenStreetMap بواسطة مجتمع من مصممي الخرائط المتطوعين ، الذين يساهمون في البيانات المكانية ويحافظون عليها.

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

اختيار إطار عمل خرائط الويب

لذا ، مع كل الخيارات ، كيف نختار أداة الخرائط المناسبة عبر الإنترنت؟ من ناحية أخرى ، هناك موفرو خرائط تجاريون عبر الإنترنت مثل Google و MapQuest و Microsoft و Nokia. توفر هذه الخدمات مربعات الخرائط وواجهات برمجة تطبيقات JavaScript الملائمة لعرضها والتفاعل مع الخريطة. من ناحية أخرى ، هناك مشاريع خرائط مفتوحة المصدر توفر سهولة تحميل مربعات الخرائط المستندة إلى OpenStreetMap. وتشمل هذه الطبقة المفتوحة والنشرة. ثم هناك مشاريع مثل MapBox و CartoDB ، والتي تبني نماذج أعمالها على مكتبات مفتوحة المصدر وبيانات OSM ، وتوفر قيمة مضافة ولكنها ليست مجانية.

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

خرائط جوجل

لنبدأ بالخيار الأكثر وضوحًا ، خرائط Google. تم تقديم الإصدار الأول من Google Maps API في فبراير 2005 ، و Google Maps API v3 الحالي في يونيو 2009. إن API لخرائط Google ليس فقط نقطة نهاية JavaScript API ؛ يتضمن المزيد من المشاريع ويقدم عدة طرق مختلفة لتضمين خرائط Google في صفحات الويب مع تخصيص شامل.

تشمل واجهات API لخرائط Google المتوفرة حاليًا ما يلي:

• واجهة برمجة تطبيقات جافا سكريبت لخرائط Google
• واجهة برمجة تطبيقات خرائط Google الثابتة
• واجهة برمجة تطبيقات Google Maps Embed
• خرائط جوجل SDK لنظام iOS
• خرائط Google Android API الإصدار 2

لمساعدتك في اختيار API الصحيح ، طورت Google منتقي API.

تجدر الإشارة إلى أنه على الرغم من أن واجهات برمجة التطبيقات الأساسية مجانية ، إلا أن هناك بعض القيود المفروضة. الأول هو أن الخرائط يجب أن تكون مجانية ومتاحة للجمهور للمستخدمين النهائيين. ثانيًا ، قيود الاستخدام: الخدمة مجانية طالما أن موقعك لا يُنشئ أكثر من 25000 تحميل خريطة يوميًا ، على مدار أي فترة 90 يومًا. إذا كنت بحاجة إلى مقاييس أكبر أو تريد خريطة خاصة ، أو كنت تدير مؤسسة أو موقعًا تجاريًا ، فيجب أن تفكر في الدفع مقابل Google Maps API for Work.

تطبيق

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

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> <div></div> <script type="text/javascript"> var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(45.8167, 15.9833), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker = new google.maps.Marker({ position: new google.maps.LatLng(45.8167, 15.9833), map: map }); google.maps.event.addListener(marker, 'click', (function(marker) { return function() { infowindow.setContent("Zagreb"); infowindow.open(map, marker); } })(marker)); </script> </body> </html>

تبدو الخريطة الناتجة كما يلي:

الايجابيات

• تم تطويره وصيانته بواسطة Google.
• الكثير من واجهات برمجة التطبيقات المختلفة لتضمين خريطة في موقع الويب أو التطبيق الخاص بك.
• مجتمع كبير من المستخدمين.
• وثائق API جيدة جدًا ، مع الكثير من الأمثلة.

سلبيات

• هل نحن على يقين من أننا لن نرى أي إضافات في مرحلة ما؟
• الجميع يستخدمه. تبدو جميع الخرائط (في الغالب) متشابهة.
• API مغلق والملاءمة.
• لا توجد مكونات إضافية بجانب تلك التي طورتها Google رسميًا.
• أسعار غير واضحة لـ Google Maps for Work.

OpenLayers

تم تطوير OpenLayers بواسطة MetaCarta كمصدر مفتوح مكافئ لخرائط Google ، وتم نشر الإصدار الأول في يونيو 2006. OpenLayers هي أداة رسم خرائط onling تقوم بتنفيذ JavaScript API لبناء تطبيقات جغرافية غنية قائمة على الويب ، مع واجهة برمجة تطبيقات مشابهة لـ API خرائط جوجل. اكتسبت OpenLayers الكثير من قوة الدفع بسرعة كبيرة ، وكان التطور في البداية سريعًا. تم إصدار OpenLayers 2 بعد شهرين فقط من الإصدار 1 ، في أغسطس 2006. كانت المكتبة قيد التطوير باستمرار ، ويتم باستمرار إضافة إصدارات جديدة بميزات جديدة. كان الجانب السلبي لهذا التقدم السريع هو أن مكتبة الإصدار 2 أصبحت كبيرة جدًا وعرقلة ، ووصل حجمها في النهاية إلى 1 ميغا بايت وتحتوي على أكثر من 100000 سطر من التعليمات البرمجية! بينما يأتي مع الكثير من الميزات ، لم يكن المستخدمون العاديون بحاجة إليها جميعًا.

كان هذا هو السبب الرئيسي لإعادة كتابة شاملة لمكتبتها. كان الهدف هو استهداف أحدث ميزات HTML5 و CSS3 ، مع نفس الوظائف من OpenLayers 2 ، مثل دعم الإسقاطات والبروتوكولات القياسية ووظائف التحرير. كان التركيز الرئيسي على تحسين الأداء ، وبناء أخف ، ومكونات مرئية أجمل ، وواجهة برمجة تطبيقات أفضل. نُشر هذا OpenLayers 3 المحسن كثيرًا في أغسطس 2014.

تطبيق

دعونا نرى كيف نفس الخريطة كما في المثال السابق ، هذه المرة باستخدام OpenLayers 3.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://openlayers.org/en/v3.2.1/build/ol.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.2.1/resources/jquery.min.js"></script> <script src="http://openlayers.org/en/v3.2.1/resources/bootstrap/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/resources/bootstrap/css/bootstrap.min.css" type="text/css"> </head> <body> <div class="map"> <div></div> </div> <script type="text/javascript"> var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([15.9833, 45.8167], 'EPSG:4326', 'EPSG:3857')), name: 'Zagreb', }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: 'http://ol3js.org/en/master/examples/data/icon.png' })) }); iconFeature.setStyle(iconStyle); var vectorSource = new ol.source.Vector({ features: [iconFeature] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); var map = new ol.Map({ target: document.getElementById('map'), layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], controls: ol.control.defaults(), view: new ol.View({ center: ol.proj.transform([15.9833, 45.8167], 'EPSG:4326', 'EPSG:3857'), zoom: 10 }) }); var element = document.getElementById('popup'); var popup = new ol.Overlay({ element: element, positioning: 'bottom-center', stopEvent: false }); map.addOverlay(popup); map.on('click', function(evt) { var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { return feature; }); if (feature) { var geometry = feature.getGeometry(); var coord = geometry.getCoordinates(); popup.setPosition(coord); $(element).popover({ 'placement': 'top', 'html': true, 'content': feature.get('name') }); $(element).popover('show'); } else { $(element).popover('destroy'); } }); map.on('pointermove', function(e) { if (e.dragging) { $(element).popover('destroy'); return; } var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasFeatureAtPixel(pixel); map.getTarget().style.cursor = hit ? 'pointer' : ''; }); </script> </body> </html>

والنتيجة:

الايجابيات

• مجاني ومفتوح المصدر.
• مكتبة مليئة بالميزات لاحتياجاتك في التعيين.
• الكثير من الأمثلة.
• دعم لمجموعة من أنواع البيانات ومعايير نظم المعلومات الجغرافية.
• دعم مدمج لإسقاطات الخرائط وميزات التحرير.

سلبيات

• لا يزال الإصدار 3 قيد التطوير المكثف ، ولا تزال واجهة برمجة التطبيقات تتغير مع كل إصدار نقطي.
• بناء جملة API معقد.
• وثائق الإصدار 3 ليست دقيقة في الوقت الحالي كما يمكن أن تكون.

منشور

من الآمن القول أن Leaflet وُلد كرد فعل على انتفاخ OpenLayers وفوضى وتعقيده. طُلب من فلاديمير أجافونكين بناء غلاف حول OpenLayers ، لكنه بدلاً من ذلك ابتكر بديلًا بسيطًا وخفيف الوزن OpenLayers ، وفي مايو 2011 ولد Leaflet. ركز فلاديمير على البساطة والأداء وسهولة الاستخدام لأداة الخريطة عبر الإنترنت. تحتوي المكتبة الأساسية على وظائف أساسية فقط ، وهو ما يكفي لمعظم حالات الاستخدام الواقعية. ومع ذلك ، يمكن تمديد Leaflet بكمية هائلة من المكونات الإضافية التي يسهل تطويرها وإضافتها أعلى المكتبة الأساسية. بالإضافة إلى ذلك ، تم تطوير Leaflet من البداية مع مراعاة دعم الهاتف المحمول.

Leaflet سهل الاستخدام ويحتوي على واجهة برمجة تطبيقات موثقة جيدًا ، جنبًا إلى جنب مع كود مصدر بسيط متاح على GitHub. نتيجة لتركيزها على الأداء ، وسهولة الاستخدام ، والبساطة ، وصغر الحجم ، ودعم الأجهزة المحمولة ، فهي أقل تعقيدًا من OpenLayers.

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

تطبيق

ها هي نفس الخريطة كما كانت من قبل مرة أخرى ، هذه المرة تم تنفيذها باستخدام Leaflet.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> </head> <body> <div></div> <script type="text/javascript"> var map = L.map('map').setView([45.8167, 15.9833], 10); var mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png'; L.tileLayer(mbUrl, {id: 'examples.map-i875mjb7'}).addTo(map); var marker = L.marker([45.8167, 15.9833]).bindPopup("Zagreb").addTo(map); </script> </body> </html> 

الايجابيات

• مجاني ومفتوح المصدر.
• صغير وسريع.
• بنية API بسيطة وسهلة.
• متوافق مع الجوّال.
• جيد للحصول على خريطة على الإنترنت بسرعة وسهولة.
• الكثير من الأمثلة مع توثيق جيد جدا.

سلبيات

• عدم وجود وظائف متقدمة.

MapBox

تحاول شركة ناشئة تُدعى MapBox إحداث ثورة في سوق رسم الخرائط عبر الإنترنت ، بهدف إنشاء خرائط عبر الإنترنت ذات مظهر أفضل وأكثر تنوعًا. تستخدم MapBox JavaScript API Leaflet ، وتتم كتابتها كمكوِّن إضافي Leaflet. إنه يوسع وظائف Leaflet ، ويتكامل مع خدمات الويب MapBox الأخرى ، بما في ذلك استضافة MapBox للخرائط ومجموعات البيانات المخصصة التي ينشئها المستخدم. إلى جانب JavaScript API ، يتضمن MapBox الخدمات المتصلة التالية:

• أجهزة تطوير البرامج (SDK) لنظامي التشغيل iOS و Android.
• مجموعة من الخرائط المصممة مسبقًا.
• الخرائط الثابتة التي يمكن عرضها دون الحاجة إلى مكتبة الخرائط.
• خدمة الترميز الجغرافي.
• خدمة الاتجاهات.

لا يقدم MapBox خدمة الخرائط فحسب ، بل يوفر أيضًا إمكانية الوصول إلى البيانات ، بما في ذلك صور الأقمار الصناعية التي تم الحصول عليها بشكل خاص ، والبيانات المفتوحة من وكالة ناسا ، وبيانات العالم التي يحركها المجتمع من OpenStreetMap. يتم تصميم البيانات باستخدام CartoCSS ، وهو تنسيق نمط تم إنشاؤه بواسطة MapBox ، بناءً على CSS وإطار تصميم LESS. على الرغم من أن خدمة MapBox تقدم مستوى مجانيًا ، إلا أنها محدودة في النطاق الترددي والتخزين ، وأي استخدام جاد يجب أن تدفع مقابل الخدمة.

لقد أدركت العديد من الشركات الكبرى الفوائد التي يوفرها MapBox ، وتستخدمها في مواقعها الخاصة. وهي تشمل Foursquare ، و Evernote ، و Pinterest ، و The Financial Times ، و GitHub ، و Etsy ، على سبيل المثال لا الحصر.

CartoCSS

فيما يلي مثال لخريطة MapBox الرائعة باستخدام نمط يسمى Pirates ، تم إنشاؤه بواسطة مصممي MapBox. نظرًا لأن MapBox يعمل أعلى Leaflet ، فإن الكود المراد تضمينه في صفحة الويب الخاصة بك سيكون مشابهًا لمثال Leaflet أعلاه:

كما هو مذكور أعلاه ، يتم استخدام CartoCSS لتصميم المربعات المتجهة في MapBox. يتم ذلك باستخدام MapBox Studio ، وهو أيضًا مفتوح المصدر. باستخدام MapBox Studio ، من الممكن إنشاء أنماط الخرائط الخاصة بك من البداية ، أو تغيير وتوسيع الأنماط الحالية التي أنشأها مصممين آخرين. بمجرد تحميل خريطتك المخصصة إلى حساب MapBox الخاص بك ، يمكنك تضمينها على موقعك باستخدام MapBox API.

فيما يلي عينة من CartoCSS المستخدمة للحصول على Pirates baselayer:

 @name: '[name_en]'; @name_arrr: "[name_en].replace('([Aa]r)','\1rr')"; @land: #fff8f0; @water: #cdd; @park: #cda; Map { background-color:@land; background-image:url(img/noise.png); } #admin[maritime=0][zoom>=3] { line-join: round; line-color: #478; comp-op:multiply; // Countries [admin_level=2] { line-cap:round; line-width: 0.8; [zoom>=6] { line-width: 2; } [zoom>=8] { line-width: 4; } [disputed=1] { line-dasharray: 4,4; line-cap:butt; } } // States / Provices / Subregions [admin_level>=3] { line-width: 0.4; line-dasharray: 10,3,3,3; [zoom>=6] { line-width: 1; } [zoom>=8] { line-width: 2; } [zoom>=12] { line-width: 3; } } } @water_line:lighten(@water,8); #water { ::b { polygon-pattern-file:url(img/water.png); polygon-pattern-alignment:global; } polygon-fill: mix(@water,#fff,50); polygon-gamma: 0.6; comp-op:multiply; a/line-color:@water_line; a/line-width:-0.4; a/line-comp-op:multiply; a/line-smooth:2; b/line-color:@water_line; b/line-width:-0.4; b/line-comp-op:multiply; b/line-smooth:4; c/line-color:@water_line; c/line-width:-0.4; c/line-comp-op:multiply; c/line-smooth:6; [zoom>=12] { a/line-width:0.8; b/line-width:0.8; c/line-width:0.8; } } #waterway { comp-op:multiply; [type='river'], [type='canal'] { line-color: @water; line-width: 0.5; [zoom>=12] { line-width: 1; } [zoom>=14] { line-width: 2; } [zoom>=16] { line-width: 3; } } [type='stream'] { line-color: @water; line-width: 0.5; [zoom>=14] { line-width: 1; } [zoom>=16] { line-width: 2; } [zoom>=18] { line-width: 3; } } } #landuse { ::glow { comp-op:multiply; [class='park'],[class='pitch'],[class='school'] { line-width:2; line-join:round; [class='park'] { line-color:#ddb; } [class='pitch'] { line-color:#eed; } [class='school'] { line-color:#edb; } } } ::main[zoom>=0] { comp-op:multiply; [class='park'] { polygon-pattern-file:url(img/park.png); polygon-pattern-alignment:global; } [class='school'] { polygon-fill:#ed9; polygon-opacity:0.5; } } ::wood[class='wood'] { line-color:#C3CFB4; line-opacity:0.33; line-width:3; line-join:round; polygon-pattern-file:url(img/forest.png); polygon-pattern-alignment:global; comp-op:multiply; opacity:0.5; } } #building { polygon-fill:#efe8d8; comp-op:multiply; [zoom>=15] { line-color:#efe8d8 * 0.9; [zoom>=15] { line-width:0.2; } [zoom>=16] { line-width:0.4; } [zoom>=17] { line-width:0.8; } } } #tunnel { opacity: 0.5; } #road, #tunnel, #bridge { ['mapnik::geometry_type'=2] { line-width: 1; line-color:#edc; line-comp-op:multiply; [class='motorway'], [class='main'], [class='motorway_link']{ line-color:#dba; [zoom>=10] { line-width: 1; } [zoom>=12] { line-width: 2; } [zoom>=14] { line-width: 3; } [zoom>=16] { line-width: 5; } } [class='street'], [class='street_limited'] { [zoom>=13] { line-width: 1.4; } [zoom>=14] { line-width: 2; } [zoom>=16] { line-width: 3; } } [class='street_limited'] { line-dasharray: 4,1; } [class='path'] { line-dasharray: 3,2; } } }

أرغ ، يا صاح!

ألق نظرة على بعض أنماط MapBox الأخرى المصممة مسبقًا هنا.

الايجابيات

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

سلبيات

• الأشياء الجيدة ليست مجانية.
• يعتمد التسعير على حركة المرور أكثر من الميزات.

كارتودب

للحصول على تصور وتحليل أكثر تعقيدًا للبيانات الجغرافية المكانية ، تعد CartoDB واحدة من أفضل الأدوات المتوفرة. إنها خدمة سحابية تخزن البيانات الجغرافية في قاعدة بيانات ممكّنة مكانيًا في السحابة تسمى PostGIS ، وتوفر أدوات للوصول إلى البيانات وتحليلها باستخدام القوى المكانية والموقع الجغرافي لـ PostGIS ، وعرضها باستخدام Leaflet.

تم إنشاء CartoDB نتيجة لعدم وجود بدائل لسهولة تصورات البيانات الجغرافية المكانية وتخزينها. وبالتالي ، يمكن اعتبار CartoDB بديلاً عن Fusion Tables من Google. يمكن للمستخدمين استيراد مجموعات البيانات بتنسيقات مختلفة ، بما في ذلك جداول CSV أو KML أو Excel ، ووضعها في طبقات فوق الخرائط من مصادر شائعة مثل Google أو Here (Nokia) أو OpenStreetMap. نظرًا لأنه يتم تخزين جميع البيانات الجغرافية في قاعدة بيانات حقيقية ، يمكن الوصول إلى البيانات والاستعلام عنها باستخدام SQL ، ثم تصميمها باستخدام CSS.

يتم تقديم خدمة CartoDB باسم "freemium" ؛ يمكن للمستخدمين الذين يتركون بياناتهم مفتوحة للجمهور استضافة مشاريعهم على موقع CartoDB الإلكتروني مجانًا. لتخزين البيانات الخاصة أو استيراد أكثر من 5 ميغا بايت من البيانات أو استخدام أكثر من خمسة جداول ، يجب على المستخدمين الاشتراك في خطة مدفوعة.

GeoJSON

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

 { "type": "FeatureCollection", "features": [ { "type":"Feature", "geometry": { "type":"Point", "coordinates":[15.9833,45.8167] }, "properties": { "cartodb_id":1, "name":"Zagreb", "description":null, "created_at":"2015-02-20T21:02:16Z", "updated_at":"2015-02-20T21:03:59Z" } } ] } 

ومع ذلك ، للتعرف حقًا على ما يمكن لـ CartoDB القيام به ، ألق نظرة على معرض الصور الخاص بهم.

الايجابيات

• عظيم لإدارة وتخزين البيانات الجغرافية المكانية.
• يدعم الكثير من تنسيقات البيانات ومجموعات البيانات الكبيرة.
• استنادًا إلى منتجات مفتوحة المصدر مثبتة ، مثل Leaflet و PostGIS.
• نموذج فريميوم.

سلبيات

• ليس حر.
• يعتمد التسعير على حجم البيانات المخزنة ، والتي يمكن أن تصبح باهظة الثمن إذا تم استخدام مجموعات بيانات كبيرة جدًا.

خيارات أخرى لمطوري الويب

هذه هي أكثر أطر عمل الخرائط شيوعًا المتوفرة حاليًا ، ولكن هناك خيارات أخرى أقل شهرة في البرية. إذا كنت مرتبطًا بنظام Microsoft البيئي ، فإنهم يقدمون واجهة برمجة تطبيقات مشابهة لخرائط Google تسمى Bing Maps API.

ولا يمكننا الذهاب دون ذكر ديناصور في عالم رسم الخرائط على الإنترنت ، MapQuest. لا يزال موجودًا ويقدم أدوات رسم الخرائط MapQuest.

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

تصميم الخرائط الخاصة بك

توفر كل هذه الأطر طريقة لتخصيص نمط ومظهر خرائطك. يوفر كل من MapBox و CartoDB التصميم باستخدام CSS أو أحد أشكال CSS.

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

إذا قررت استخدام OpenLayers أو Leaflet ، فأنت مقيد ببلاطات الخرائط المعروضة مسبقًا. لحسن الحظ ، هناك مجموعة مختلفة من مربعات الخرائط للاختيار من بينها ، من Google أو Nokia أو Bing أو مربعات OSM الافتراضية ، إلى تلك التي أنشأها المصممون خصيصًا ، مثل Stamen. للتعرف على عدد مربعات الخرائط المتوفرة ، أو كيف تبدو مقارنة ببعضها البعض ، قم بزيارة Streetmap Smackdown أو Map مقارنة المواقع.

مستقبل خرائط الويب وأدوات رسم الخرائط

مستقبل عالم رسم الخرائط يبدو مثيرًا للاهتمام. فيما يلي بعض التقنيات الناشئة التي كانت ستبدو مثل الخيال العلمي قبل بضع سنوات فقط:

• Vector-Only - يؤدي استخدام خرائط المتجهات بدلاً من الصور النقطية مع D3.js إلى ظهور عالم جديد من الميزات غير الممكنة باستخدام أطر العمل القياسية. يتحرك MapBox أيضًا في هذا الاتجاه ، مع MapBox GL ، استنادًا إلى OpenGL.
• 3D - تظهر الآن التضاريس والمباني ثلاثية الأبعاد في الخرائط ، وسفن OpenLayers v3 مع دعم مدمج للسيزيوم.
• GIS والتحليل المكاني في متصفح الويب - ممكن بالفعل باستخدام Turf. Turf هي مكتبة JavaScript تدعم العمليات المكانية والإحصائية ، وتصنيف البيانات ، وإنشاء بيانات GeoJSON ، وكل ذلك داخل المتصفح.

يتم إحتوائه

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

كي تختصر:

• خرائط Google - حل خرائط جيد التقريب وراسخ ، خاصة لغير المطورين للحصول على خريطة أساسية على الويب ، إلى جانب جميع الصلاحيات التي تشتهر بها Google (في).
• OpenLayers - في المواقف التي لا تستطيع فيها أطر عمل الخرائط الأخرى حل مشكلات التحليل المكاني.
• المنشور - حاليًا ، أفضل إطار عمل لرسم الخرائط لأغراض عامة لرسم الخرائط ، خاصة إذا كنت لا تحتاج إلى الخدمات الإضافية التي يوفرها MapBox أو CartoDB.
• MapBox - حل خرائط سريع النمو ومتغير للسوق عندما تريد مزيدًا من التحكم في تصميم الخرائط أو تحتاج إلى خدمات لا يوفرها الآخرون ، مثل صور الأقمار الصناعية التفصيلية أو الترميز الجغرافي أو الاتجاهات.
• CartoDB - إذا كان لديك مجموعات بيانات ثقيلة مخزنة في تنسيقات بيانات مختلفة ، فلا داعي لمزيد من البحث.

مزيد من القراءة على مدونة Toptal Engineering:

• خدمة مجموعات الخرائط 50x أسرع باستخدام التخزين المؤقت الأكثر ذكاءً