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

مقالة
11/06/2024

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

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

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

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

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

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

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

إضافة 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>

    <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. تتم إضافة هذه الدالة في الخطوة التالية.

بعد ذلك، أضف التعليمات البرمجية 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 يوفر التحكم لخريطة الويب المرئية والتفاعلية.
احفظ التغييرات التي أجريتها على الملف وافتح صفحة HTML في المستعرض. الخريطة المعروضة هي الخريطة الأساسية التي يمكنك إجراؤها عن طريق الاتصال atlas.Map باستخدام مفتاح اشتراك حساب خرائط Azure.

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

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

في الدالة 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'.
يتم إنشاء طبقة رمزية وإرفاقها بمورد البيانات في الخطوة التالية. تحدد هذه الطبقة كيفية عرض نقطتي البدء والنهاية. تمت إضافة التعبيرات لاسترداد صورة الأيقونة ومعلومات تسمية النص من الخصائص في كل كائن نقطة. لمعرفة المزيد حول التعبيرات، راجع تعبيرات الأنماط المبنية على البيانات.
بعد ذلك، قم بتعيين نقطة البداية كـ 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.
- تتم إضافة نطاق لتعويض أبعاد البكسل للأيقونات الرمزية.
لمزيد من المعلومات حول خاصية setCamera لعنصر تحكم الخريطة، راجع setCamera(CameraOptions | خاصية CameraBoundsOptions &AnimationOptions).
احفظ MapRoute.html وحدّث المتصفح الخاص بك. تتمركز الخريطة الآن فوق سياتل. يشير المؤشر الأزرق الدمعي إلى نقطة البداية. يشير المؤشر الأزرق الدائري إلى نقطة النهاية.

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

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

تلميح

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

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

var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
var url = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;

//Make a search route request
fetch(url, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var route = response.routes[0];
    //Create an array to store the coordinates of each turn
    var routeCoordinates = [];
    route.legs.forEach((leg) => {
        var legCoordinates = leg.points.map((point) => {
            return [point.longitude, point.latitude];
        });
        //Add each turn to the array
        routeCoordinates = routeCoordinates.concat(legCoordinates);
    });
    //Add route line to the datasource
    datasource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates)));
});

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

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

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

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

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

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

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

مشاركة عبر