مشاركة عبر

البرنامج التعليمي: العثور على مسارات لطرق سفر مختلفة باستخدام Microsoft Azure Maps وعرضها

  • مقالة

يوضح هذا البرنامج التعليمي كيفية استخدام خدمة المسار خرائط Azure والتحكم في الخريطة لعرض توجيهات المسار لكل من المركبات الخاصة والمركبات التجارية (الشاحنات) مع USHazmatClass2 نوع البضائع.

في هذا البرنامج التعليمي، تتعلم كيفية:

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

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

إشعار

ولمزيد من المعلومات حول مصادقة Azure Maps، راجع إدارة المصادقة في Azure Maps.

إنشاء صفحة ويب جديدة باستخدام واجهة برمجة تطبيقات التحكم في الخريطة

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

  1. أنشئ على جهازك ملفاً جديداً وسمّه MapTruckRoute.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>

    <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 Subscription Key> واستبدلها بمفتاح اشتراك خرائط Azure الذي نسخته من حساب الخرائط الخاص بك.

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

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

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

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

    لقطة شاشة تعرض الخريطة الأساسية التي يمكنك إجراؤها عن طريق استدعاء atlas Map API، باستخدام مفتاح اشتراك خرائط Azure.

عرض بيانات الحركة في الوقت الفعلي على أي خريطة

  1. في الدالة GetMap ، بعد تهيئة الخريطة، أضف التعليمات البرمجية JavaScript التالية. تنفذ هذه التعليمات البرمجية معالج الأحداث ready لعنصر التحكم بالخرائط.

    map.events.add("ready", function() {
    // Add Traffic Flow to the Map
    map.setTraffic({
        flow: "relative"
    });
});

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

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

  2. احفظ ملف MapTruckRoute.html وحدّث الصفحة في مستعرضك. إذا قمت بتكبير أي مدينة، مثل لوس أنجلوس، فستظهر الشوارع ببيانات تدفق حركة المرور الحالية.

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

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

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

  1. في معالج أحداث عنصر التحكم بالخريطة ready، أضف التعليمات البرمجية التالية.

    
//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: ['get', 'strokeColor'],
    strokeWidth: ['get', 'strokeWidth'],
    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 للتحكم بالخريطة، يتم إنشاء مورد بيانات لتخزين المسار من البداية إلى النهاية.
    • تُستخدم التعبيرات لاستخراج عرض الخط ولونه من الخصائص الموجودة في ميزة خط المسار.
    • للتأكد من أن خط التوجيه لا يغطي تسميات الطريق، مرر معلمة ثانية بقيمة 'labels'.

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

  2. بعد ذلك، عيّن نقطة البداية بحيث تكون شركة وهمية في سياتل اسمها Fabrikam ونقطة النهاية مكتباً من مكاتب Microsoft. في معالج أحداث عنصر التحكم بالخريطة ready، أضف التعليمات البرمجية التالية.

    //Create the GeoJSON objects which represent the start and end point of the route.
var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.356099, 47.580045]), {
    title: 'Fabrikam, Inc.',
    icon: 'pin-blue'
});

var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.201164, 47.616940]), {
    title: 'Microsoft - Lincoln Square',
    icon: 'pin-round-blue'
});

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

//Fit the map window to the bounding box defined by the start and end positions.
map.setCamera({
    bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
    padding: 100
});

    حول JavaScript:

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

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

    لقطة شاشة توضح خريطة بها مسار يحتوي على مؤشر أزرق دمعي يشير إلى نقطة البداية ومؤشر دائري أزرق يشير إلى نقطة النهاية.

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

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

تلميح

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

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

    //Start and end point input to the search route request
var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
//Make a search route request for a truck vehicle type
var truckRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&travelMode=truck&vehicleWidth=2&vehicleHeight=2&vehicleLength=5&vehicleLoadType=USHazmatClass2&query=${query}`;
fetch(truckRouteUrl, {
    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 the route line to the data source. We want this to render below the car route which will likely be added to the data source faster, so insert it at index 0.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#2272B9",
            strokeWidth: 9
        }),
        0
    );
});

    حول JavaScript أعلاه:

    • تستعلم التعليمة البرمجية عن خدمة مسارات Microsoft Azure Maps من خلال واجهة برمجة تطبيقات اتجاهات مسارات Microsoft Azure Maps .
    • ثم يتم إنشاء خط التوجيه من إحداثيات كل منعطف من الاستجابة.
    • تتم إضافة خط المسار إلى مورد البيانات.
    • تمت إضافة خاصيتين إلى خط مسار الشاحنة: لون #2272B9حد أزرق وعرض حد بحجم تسعة بكسل.
    • يتم إعطاء خط التوجيه فهرسًا من 0 لضمان عرض مسار الشاحنة قبل أي خطوط أخرى في مصدر البيانات. والسبب هو أن حساب مسار الشاحنة غالبا ما يكون أبطأ من حساب مسار السيارة. إذا تمت إضافة خط مسار الشاحنة إلى مورد البيانات بعد مسار السيارة، فسيتم عرضه فوقه.

    تلميح

    لعرض على جميع الخيارات والقيم الممكنة لواجهة برمجة تطبيقات اتجاهات مسارات Microsoft Azure Maps، راجع معاملات URI لاتجاهات المسارات اللاحقة.

  2. أضف بعد ذلك تعليمات JavaScript البرمجية التالية لإنشاء مسار للسيارة.

    var carRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;
fetch(carRouteUrl, {
    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 the route line to the data source. This will add the car route after the truck route.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#B76DAB",
            strokeWidth: 5
        })
    );
});

    حول JavaScript:

    • تستعلم التعليمة البرمجية عن خدمة مسارات Microsoft Azure Maps من خلال طريقة واجهة برمجة تطبيقات اتجاهات مسارات Microsoft Azure Maps .
    • ثم يتم إنشاء خط التوجيه من إحداثيات كل دور وإضافته إلى مصدر البيانات.
    • تمت إضافة خاصيتين إلى خط مسار الشاحنة: لون حد بنفسجي وعرض #B76DAB حد بحجم خمسة بكسل.

  3. احفظ ملف TruckRoute.html وحدّث مستعرضك. يجب أن تعرض الخريطة الآن مسارات الشاحنات والسيارات.

    لقطة شاشة تعرض كلاً من مسار مركبة خاصة وكذلك تجارية على خريطة باستخدام Azure Route Service.

    • يتم عرض مسار الشاحنة باستخدام خط أزرق سميك ويتم عرض مسار السيارة باستخدام خط أرجواني رفيع.
    • يمر طريق السيارة عبر بحيرة واشنطن عبر I-90، ويمر عبر الأنفاق أسفل المناطق السكنية. ونظرًا لوجود الأنفاق في المناطق السكنية، يتم منح تحميل شحنات النفايات الخطيرة. يتم توجيه مسار الشاحنة، الذي يحدد نوع البضائع USHazmatClass2، لاستخدام مسار مختلف لا يحتوي على هذا القيد.

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

يوضح البرنامج التعليمي التالي عملية إنشاء محدد مواقع بسيط بالاستعانة بـ Microsoft Azure Maps.

إنشاء محدد مواقع بسيط بالاستعانة بـ Azure Maps