البرنامج التعليمي: كيفية عرض توجيهات المسار باستخدام خدمة مسار خرائط Azure والتحكم في الخريطة

  • مقالة

يوضح لك هذا البرنامج التعليمي كيفية استخدام API خدمة مسار خرائط Azure والتحكم في الخريطة لعرض توجيهات المسار من نقطة البدء إلى نقطة النهاية. يوضح هذا البرنامج التعليمي كيفية:

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

راجع البرنامج التعليمي للمسار في GitHub للحصول على التعليمات البرمجية المصدر. راجع التوجيه إلى وجهة للحصول على عينة مباشرة.

المتطلبات الأساسية

إنشاء عنصر التحكم بالخرائط وعرضه

توضح لك الخطوات التالية كيفية إنشاء عنصر للتحكم بالخرائط وعرضه في إحدى صفحات الويب.

  1. أنشئ على جهازك المحلي ملفًا جديدًا وسمّه MapRoute.html.

  2. إضافة HTML التالي إلى الملف:

    <!DOCTYPE html>
<html>
<head>
    <title>Map Route</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css">
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>

    <script>
        var map, datasource, client;

        function GetMap() {
            //Add Map Control JavaScript code here.
        }
    </script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #myMap {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body onload="GetMap()">
    <div id="myMap"></div>
</body>
</html>

    بعض الأشياء التي يجب معرفتها حول HTML أعلاه:

    • يتضمن رأس HTML ملفات موارد CSS وJavaScript التي تستضيفها مكتبة Azure Map Control.
    • يستدعي الحدث onload الموجود في نص الصفحة الوظيفة GetMap عند تحميل نص الصفحة.
    • GetMap تحتوي الدالة على تعليمة JavaScript البرمجية المضمنة المستخدمة للوصول إلى واجهات برمجة التطبيقات خرائط Azure. يتم إضافته في الخطوة التالية.

  3. بعد ذلك، أضف التعليمات البرمجية JavaScript التالية إلى الوظيفة GetMap، أسفل التعليمات البرمجية المضافة في الخطوة الأخيرة. تنشئ هذه التعليمة البرمجية عنصر تحكم خريطة وتهيئته باستخدام مفاتيح الاشتراك خرائط Azure التي توفرها. تأكد من السلسلة <Your Azure Maps Key> واستبدلها بالمفتاح الأساسي لخرائط Azure الذي نسخته من حساب الخرائط الخاص بك.

    //Instantiate a map object
var map = new atlas.Map('myMap', {
    // Replace <Your Azure Maps Key> with your Azure Maps subscription key. https://aka.ms/am-primaryKey
    authOptions: {
       authType: 'subscriptionKey',
       subscriptionKey: '<Your Azure Maps Key>'
    }
});

    بعض الأشياء التي يجب معرفتها حول JavaScript أعلاه:

    • هذه هي الذاكرة الأساسية للوظيفة GetMap، التي تهيئ واجهة برمجة تطبيقات عنصر التحكم بالخريطة لمفتاح حساب خرائط Azure الخاص بك.
    • atlas هي مساحة الاسم التي تحتوي على واجهة برمجة تطبيقات خرائط Azure والمكونات المرئية ذات الصلة.
    • atlas.Map يوفر التحكم لخريطة الويب المرئية والتفاعلية.

  4. احفظ التغييرات التي أجريتها على الملف وافتح صفحة HTML في المستعرض. الخريطة المعروضة هي الخريطة الأساسية التي يمكنك إجراؤها عن طريق الاتصال atlas.Map باستخدام مفتاح اشتراك حساب خرائط Azure.

    A screenshot showing the most basic map that you can make by calling `atlas.Map` using your Azure Maps account key.

تحديد طريقة عرض المسار

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

  1. في الدالة GetMap ، بعد تهيئة الخريطة، أضف التعليمات البرمجية JavaScript التالية.

    //Wait until the map resources are ready.
map.events.add('ready', function() {

    //Create a data source and add it to the map.
    datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    //Add a layer for rendering the route lines and have it render under the map labels.
    map.layers.add(new atlas.layer.LineLayer(datasource, null, {
        strokeColor: '#2272B9',
        strokeWidth: 5,
        lineJoin: 'round',
        lineCap: 'round'
    }), 'labels');

    //Add a layer for rendering point data.
    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
        iconOptions: {
            image: ['get', 'icon'],
            allowOverlap: true
       },
        textOptions: {
            textField: ['get', 'title'],
            offset: [0, 1.2]
        },
        filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] //Only render Point or MultiPoints in this layer.
    }));
});

    بعض الأشياء التي يجب معرفتها حول JavaScript أعلاه:

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

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

  2. بعد ذلك، قم بتعيين نقطة البداية كـ Microsoft ونقطة النهاية كمحطة وقود في سياتل. يتم إنشاء البدء والنقاط عن طريق إلحاق التعليمات البرمجية التالية في معالج أحداث عنصر تحكم ready الخريطة:

    //Create the GeoJSON objects which represent the start and end points of the route.
var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.130137, 47.644702]), {
    title: "Redmond",
    icon: "pin-blue"
});

var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.3352, 47.61397]), {
    title: "Seattle",
    icon: "pin-round-blue"
});

//Add the data to the data source.
datasource.add([startPoint, endPoint]);

map.setCamera({
    bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
    padding: 80
});

    بعض الأشياء التي يجب معرفتها حول JavaScript أعلاه:

    • تنشئ هذه التعليمات البرمجية كائنين من عناصر نقطة GeoJSON لتمثيل نقطتي البداية والنهاية، ويُضافان فيما بعد إلى مورد البيانات.
    • تعيّن المجموعة الأخيرة من التعليمات البرمجية عرض الكاميرا باستخدام خط الطول وخط العرض لنقطتي البداية والنهاية.
    • تُضاف نقطتا البداية والنهاية إلى مورد البيانات.
    • يتم حساب مربع الإحاطة لنقطتي البداية والنهاية باستخدام وظيفة atlas.data.BoundingBox.fromData. يتم استخدام مربع الإحاطة هذا لتعيين عرض كاميرات للخرائط على المسار بالكامل باستخدام وظيفة map.setCamera.
    • تتم إضافة نطاق لتعويض أبعاد البكسل للأيقونات الرمزية.

    لمزيد من المعلومات حول مجموعة عنصر تحكم الخريطة الكاميرا الخاصية، راجع المجموعة الكاميرا(الكاميرا Options | الكاميرا BoundsOptions &AnimationOptions) الخاصيه.

  3. احفظ MapRoute.html وحدّث المتصفح الخاص بك. تتمركز الخريطة الآن فوق سياتل. يشير المؤشر الأزرق الدمعي إلى نقطة البداية. يشير المؤشر الأزرق الدائري إلى نقطة النهاية.

    A screenshot showing a map with a route containing a blue teardrop pin marking the start point at Microsoft in Redmond Washington and a blue round pin marking the end point at a gas station in Seattle.

الحصول على توجيهات المسار

يوضح هذا القسم كيفية استخدام API لتوجيهات مسار خرائط Azure للحصول على توجيهات المسار والوقت المقدر للوصول من نقطة إلى أخرى.

تلميح

توفر خدمات مسار خرائط Azure الـ APIs لوضع أنواع مختلفة للمسارات كالأسرع أو الأقصر أو الأوفر أو الأكثر جمالًا حسب المسافة وظروف حركة المرور ووسيلة الانتقال المستخدمة. تتيح الخدمة للمستخدمين كذلك وضع خطط للمسارات المستقبلية حسب الظروف السابقة لحركة المرور. يمكن للمستخدمين رؤية التنبؤ بمُدد المسارات في أي فترة زمنية معينة. لمزيدٍ من المعلومات، راجع الحصول على API لتوجيهات المسارات.

  1. في الوظيفة GetMap، داخل معالج الأحداث ready لعنصر التحكم، أضف ما يلي إلى تعليمات JavaScript البرمجية.

    //Use MapControlCredential to share authentication between a map control and the service module.
var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.MapControlCredential(map));

//Construct the RouteURL object
var routeURL = new atlas.service.RouteURL(pipeline);

  2. بعد إعداد بيانات الاعتماد وعنوان URL، ألحق التعليمات البرمجية التالية في معالج الأحداث لعنصر التحكمready.

    //Start and end point input to the routeURL
var coordinates= [[startPoint.geometry.coordinates[0], startPoint.geometry.coordinates[1]], [endPoint.geometry.coordinates[0], endPoint.geometry.coordinates[1]]];

//Make a search route request
routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {
    //Get data features from response
    var data = directions.geojson.getFeatures();
    datasource.add(data);
});

    بعض الأشياء التي يجب معرفتها حول JavaScript أعلاه:

    • تقوم هذه التعليمات البرمجية بإنشاء المسار من نقطة البداية إلى نقطة النهاية.
    • routeURLتطلب API خدمة مسار خرائط Azure لحساب توجيهات المسار.
    • يتم بعد ذلك استخراج مجموعة ميزات GeoJSON من الاستجابة باستخدام geojson.getFeatures() الأسلوب وإضافتها إلى مصدر البيانات.

  3. احفظ ملف MapRoute.html وحدّث المتصفح الخاص بك. يجب أن تعرض الخريطة الآن المسار من نقطة البداية إلى نقطة النهاية.

    A screenshot showing a map that demonstrates the Azure Map control and Route service.

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

الخطوات التالية

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

البحث عن مسارات لأنماط السفر المختلفة