البرنامج التعليمي: ترحيل تطبيق ويب من Bing Maps

غالبًا ما تستخدم تطبيقات الويب التي تستخدم Bing Maps خرائط BING V8 JavaScript SDK. Azure Maps Web SDK هو Azure-based SDK المناسب للترحيل إليه. يتيح لك Azure Maps Web SDK تخصيص الخرائط التفاعلية باستخدام المحتوى والصور الخاصة بك لعرضها في تطبيقات الويب أو الجوال. هذا التحكم يجعل استخدام WebGL، مما يسمح لك لتقديم مجموعات البيانات الكبيرة مع الأداء العالي. التطوير من خلال SDK هذا باستخدام JavaScript أو TypeScript. يوضح هذا البرنامج التعليمي كيفية:

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

إذا كان التطوير باستخدام إطار عمل JavaScript، يمكن أن يكون أحد المشاريع مفتوحة المصدر التالية مفيدا:

• ng-azure-maps - برنامج تضمين Angular 10 حول Azure maps.
• AzureMapsControl.Components - مكون Azure Maps Blazor.
• Azure Maps React Component - برنامج تضمين التفاعل لعنصر تحكم Azure Maps.
• Vue Azure Maps - مكون Azure Maps لتطبيق Vue.

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

في حال لم يكن لديك اشتراك Azure، فأنشئ حساباً مجانيّاً قبل البدء.

• حساب خرائط Azure
• مفتاح اشتراك

دعم الميزات الرئيسية

يسرد الجدول التالي ميزات API الرئيسية في خرائط BING V8 JavaScript SDK ودعم API مشابهة في Azure Maps Web SDK.

ميزات Bing Maps	الوحدة النمطية لخرائط Bing	دعم Azure Maps Web SDK
دبابيس تثبيت		✓
تجمع دبوس تثبيت	Microsoft.Maps.Clustering	✓ Pushpin clustering
خطوط مضلعة ومضلعات		✓
تراكبات أرضية		✓
خرائط التمثيل اللوني	Microsoft.Maps.HeatMap	✓ إضافة خريطة التمثيل اللوني
طبقات التجانب		✓
طبقة KML	Microsoft.Maps.GeoXml	✓ وحدة الإدخال/الإخراج المكانية
طبقة إحاطة	Microsoft.Maps.Contour	✓ نماذج التعليمات البرمجية لطبقة Contour
طبقة سلة البيانات	Microsoft.Maps.DataBinning	✓ مضمن في وحدة مصدر البيانات مفتوحة المصدر خرائط Azure Gridded
طبقة إطار متجانب متحركة		✓ مضمن في وحدة الحركة خرائط Azure مفتوحة المصدر
أدوات الرسم	Microsoft.Maps.DrawingTools	✓ إضافة أدوات الرسم
خدمة الكود الجغرافي	Microsoft.Maps.Search	✓ Search API أو REST SDK
خدمة الاتجاهات	Microsoft.Maps.Directions	✓ Route API
خدمة مصفوفة المسافة		✓ Route Matrix API
خدمة البيانات المكانية	Microsoft.Maps.SpatialDataService	‏‫غير متوفر‬
صور الأقمار الصناعية/الجو		✓ اختيار نمط خريطة
صور عيون الطيور		‏‫غير متوفر‬
صور Streetside		‏‫غير متوفر‬
دعم GeoJSON	Microsoft.Maps.GeoJson	✓
دعم GeoXML	Microsoft.Maps.GeoXml	✓ وحدة الإدخال/الإخراج المكانية
دعم النص المعروف	Microsoft.Maps.WellKnownText	✓ وحدة الإدخال/الإخراج المكانية
خرائط داخلية	Microsoft.Maps.VenueMaps	✓ منشئ
تدفق نسبة استخدام الشبكة	Microsoft.Maps.Traffic	✓ التحكم في حركة المرور
الرياضيات المكانية	Microsoft.Maps.SpatialMath	✓ atlas.math samples أو turf js
أنماط الخريطة المخصصة		جزئي، اختر نمط خريطة

خرائط Azure المزيد من الوحدات النمطية مفتوحة المصدر ل SDK الويب التي توسع قدراتها.

اختلافات ملحوظة في Web SDKS

فيما يلي بعض الاختلافات الرئيسية بين Bing Maps وAzure Maps Web SDKs يجب أن تكون على علم بها:

• بالإضافة إلى توفير نقطة نهاية مستضافة للوصول إلى خرائط Azure Web SDK، تتوفر حزمة npm لتضمين Web SDK في التطبيقات إذا كان ذلك مفضلا. لمزيد من المعلومات، راجع استخدام عنصر تحكم الخريطة خرائط Azure. تتضمن هذه الحزمة أيضًا تعريفات TypeScript.
• توفر Bing Maps فرعين مستضافين من SDK الخاصة بهم، الإصدار والتجريبي. يمكن أن يتلقى الفرع التجريبي تحديثات متعددة في اليوم الذي يتم فيه تطوير جديد. يستضيف Azure Maps فرع إصدار فقط، ولكن يتم إنشاء الميزات التجريبية كوحدات نمطية مخصصة في مشروع نماذج التعليمات البرمجية Azure Maps مفتوح المصدر. Bing Maps تستخدم ليكون لها فرع المجمدة كذلك التي تم تحديثها بشكل أقل تواترًا، وبالتالي الحد من خطر كسر التغييرات بسبب الإصدار. في خرائط Azure، يمكنك استخدام الوحدة النمطية npm والإشارة إلى أي إصدار ثانوي سابق.

تلميح

تنشر Azure Maps إصدارات كل من SDK المصغرة وغير المصغرة. ما عليك سوى الإزالة .min من أسماء الملفات. الإصدار غير المصغر مفيد عند تصحيح المشكلات ولكن تأكد من استخدام الإصدار المصغر في الإنتاج للاستفادة من حجم الملف أصغر.

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

• يستخدم كلا النظامين الأساسيين نظام تجانب مشابه للخرائط الأساسية، ولكن الإطارات المتجانبة في خرائط Bing تبلغ 256 بكسل و512 بكسل في خرائط Azure. للحصول على نفس طريقة عرض الخريطة في خرائط Azure مثل خرائط Bing، اطرح مستوى تكبير/تصغير واحد في خرائط Azure.

• يشار إلى الإحداثيات في Bing Maps باسم latitude, longitude متى يُستخدم Azure Mapslongitude, latitude. يتوافق هذا التنسيق مع المعيار [x, y] الذي تتبعه معظم منصات GIS.

• تستند الأشكال الموجودة في Azure Maps Web SDK إلى مخطط GeoJSON. يتم عرض فئات المساعد من خلال atlas.data namespace. هناك أيضا الأطلس . فئة الشكل التي يمكن استخدامها لالتفاف كائنات GeoJSON وجعلها سهلة التحديث والصيانة بطريقة قابلة للربط بالبيانات.

• تُعرف الإحداثيات في Azure Maps على أنها كائنات موضع، يمكن تحديدها كصفيف أرقام بسيط من حيث التنسيق [longitude, latitude] أو new atlas.data.Position(longitude, latitude).

تلميح

تحتوي فئة الموضع على دالة مساعدة ثابتة لاستيراد الإحداثيات الموجودة في التنسيق latitude, longitude. غالبا ما يمكن استبدال الدالة atlas.data.Position.fromLatLng بالدالة في التعليمات البرمجية new Microsoft.Maps.Location لخرائط Bing.

• بدلًا من تحديد معلومات التصميم على كل شكل يضاف إلى الخريطة، يفصل Azure Maps الأنماط عن البيانات. يتم تخزين البيانات في مصادر البيانات وتكون متصلة بطبقات التقديم التي تستخدمها التعليمة البرمجية Azure Maps لعرض البيانات. يوفر هذا النهج ميزة الأداء المحسن. تدعم العديد من الطبقات التصميم المستند إلى البيانات، ويتم ذلك عن طريق إضافة منطق العمل إلى خيارات نمط الطبقة التي تغير كيفية عرض الأشكال الفردية داخل طبقة اعتمادا على خصائصها.
• يوفر خرائط Azure دالات رياضية مكانية في atlas.math مساحة الاسم تختلف عن دالات الرياضيات المكانية ل Bing Maps. الفرق الأساسي هو أن خرائط Azure لا يوفر وظائف مضمنة للعمليات الثنائية مثل union وintersection. ومع ذلك، يستند خرائط Azure إلى معيار GeoJSON المفتوح وهناك مكتبات مفتوحة المصدر متاحة. أحد الخيارات الشائعة التي تعمل بشكل جيد مع خرائط Azure وتوفر قدرات رياضية مكانية هو turf js.

لمزيد من المعلومات حول المصطلحات المتعلقة خرائط Azure، راجع مسرد خرائط Azure.

أمثلة إضافية على Web SDK

القائمة التالية هي مجموعة من نماذج التعليمات البرمجية لكل نظام أساسي تغطي حالات الاستخدام الشائعة لمساعدتك في ترحيل تطبيق الويب الخاص بك من Bing Maps V8 JavaScript SDK إلى خرائط Azure Web SDK. يتم توفير نماذج التعليمات البرمجية المتعلقة بتطبيقات الويب في JavaScript؛ ومع ذلك، يوفر خرائط Azure أيضا تعريفات TypeScript في وحدة npm. لمزيد من المعلومات حول تعريفات TypeScript، راجع استخدام عنصر تحكم مخطط خرائط Azure.

المواضيع

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

تحميل خريطة

يتبع تحميل خريطة في كل من SDKs نفس مجموعة الخطوات؛

• إضافة مرجع إلى Map SDK.
• div أضف علامة إلى النص الأساسي للصفحة التي تعمل كعن العنصر النائب للخريطة.
• إنشاء دالة JavaScript التي يتم استدعاؤها بمجرد تحميل الصفحة.
• أنشئ مثيلًا لفئة الخريطة المعنية.

الاختلافات الرئيسية

• تتطلب خرائط Bing مفتاح حساب محدد في مرجع البرنامج النصي لواجهة برمجة التطبيقات أو كخيار خريطة. يتم تحديد بيانات اعتماد المصادقة خرائط Azure كخيارات لفئة الخريطة إما كمصادقة المفتاح المشترك أو معرف Microsoft Entra.
• يقبل Bing Maps وظيفة رد اتصال في مرجع البرنامج النصي لواجهة API، والتي تستخدم لاستدعاء وظيفة تهيئة لتحميل الخريطة. مع Azure Maps، يجب استخدام حدث onload الخاص بالصفحة.
• عند استخدام معرف للإشارة div إلى العنصر الذي يتم عرض الخريطة فيه، تستخدم خرائط Bing محدد HTML (#myMap)، بينما يستخدم خرائط Azure فقط قيمة المعرف (myMap).
• تُعرف الإحداثيات في Azure Maps على أنها كائنات موضع، يمكن تحديدها كصفيف أرقام بسيط من حيث التنسيق [longitude, latitude].
• مستوى التكبير / التصغير في Azure Maps أقل بمستوى واحد من مثال Bing Maps بسبب الاختلاف في أحجام نظام التجانب بين الأنظمة الأساسية.
• بشكل افتراضي، لا تضيف Azure Maps أي عناصر تحكم في التنقل إلى لوحة الخريطة، مثل أزرار التكبير / التصغير وأزرار نمط الخريطة. ولكن، هناك عناصر تحكم لإضافة منتقي نمط الخريطة، أزرار التكبير/التصغير، البوصلة أو التحكم في الدوران، والتحكم في الدوران.
• تتم إضافة معالج أحداث في Azure Maps لمراقبة ready حدث مثيل الخرائط. يتم تشغيل هذا عند انتهاء الخريطة من تحميل سياق WebGL وجميع الموارد المطلوبة. يمكن إضافة أي تعليمة برمجية تحميل في معالج الحدث هذا.

توضح الأمثلة التالية تحميل خريطة أساسية تتمحور فوق نيويورك عند الإحداثيات (خط الطول: -73.985، خط العرض: 40.747) وهي في مستوى التكبير/التصغير 12 في خرائط Bing.

قبل: Bing Maps

التعليمات البرمجية التالية تعد مثالاً على كيفية عرض Bing Maps في المنتصف والتكبير فوق الموقع.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.747, -73.985),
                zoom: 12
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

يؤدي تشغيل هذه التعليمة البرمجية في مستعرض إلى عرض خريطة تشبه الصورة التالية:

بعد: Bing Maps

توضح التعليمات البرمجية التالية كيفية تحميل الخريطة بنفس طريقة العرض المتبعة في Azure Maps وكذلك عنصر التحكم في نمط الخريطة وأزرار التكبير/ التصغير

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 type='text/javascript'>
        var map;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-73.985, 40.747],  //Format coordinates as longitude, latitude.
                zoom: 11,   //Subtract the zoom level by one.

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Add zoom and map style controls to top right of map.
                map.controls.add([
                        new atlas.control.StyleControl(),
                        new atlas.control.ZoomControl()
                    ], {
                        position: 'top-right'
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

يؤدي تشغيل هذه التعليمة البرمجية في مستعرض إلى عرض خريطة تشبه الصورة التالية:

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

تلميح

تنشر Azure Maps إصدارات كل من SDK المصغرة وغير المصغرة. إزالة .min من أسماء الملفات. الإصدار غير المصغر مفيد عند تصحيح المشكلات ولكن تأكد من استخدام الإصدار المصغر في الإنتاج للاستفادة من حجم الملف أصغر.

المزيد من الموارد

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

ترجمة الخريطة

إذا كان جمهورك منتشرًا في بلدان/مناطق متعددة أو يتحدث لغات مختلفة، فإن الترجمة مهمة.

قبل: Bing Maps

لترجمة خرائط Bing، يتم تحديد اللغة والمنطقة باستخدام المعلمات setLangوUR ويجري إضافتها إلى مرجع العلامة <script> إلى واجهة برمجة التطبيقات. تتوفر بعض الميزات في Bing Maps فقط في أسواق معينة، حيث يتم تحديد سوق المستخدم باستخدام المعلمة setMkt.

<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=initMap&setLang={language-code}&setMkt={market}&UR={region-code}" async defer></script>

فيما يلي مثال على خرائط Bing مع تعيين اللغة إلى fr-FR.

بعد: Bing Maps

يوفر Azure Maps فقط خيارات لتعيين اللغة والعرض الإقليمي للخريطة. لا يتم استخدام معلمة السوق للحد من الميزات. هناك طريقتان مختلفتان لتعيين اللغة والعرض الإقليمي للخريطة. الخيار الأول هو إضافة هذه المعلومات إلى مساحة الاسم العمومية atlas التي تؤدي إلى تعيين كافة مثيلات التحكم في الخريطة في تطبيقك افتراضيا إلى هذه الإعدادات. يعين التالي اللغة إلى الفرنسية (fr-FR) وطريقة العرض الإقليمية إلى "Auto":

atlas.setLanguage('fr-FR');
atlas.setView('auto');

الخيار الثاني هو تمرير هذه المعلومات إلى خيارات الخريطة عند تحميل الخريطة، مثل:

map = new atlas.Map('myMap', {
    language: 'fr-FR',
    view: 'auto',

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});

إشعار

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

فيما يلي مثال على خرائط Azure مع تعيين اللغة إلى "fr" وتعيين منطقة المستخدم إلى fr-FR.

تعيين طريقة عرض الخريطة

يمكن نقل الخرائط الديناميكية في كل من Bing Maps وAzure Maps برمجيًّا إلى مواقع جغرافية جديدة عن طريق استدعاء الدوال المناسبة في JavaScript. يوضح المثال التالي خريطة تعرض صورا جوية للأقمار الصناعية، تتمحور فوق موقع مع إحداثيات (خط الطول: -111.0225، خط العرض: 35.0272) وتغيير مستوى التكبير/التصغير إلى 15 في خرائط Bing.

إشعار

يستخدم Bing Maps إطارات تجانب بحجم 256 بكسل، بينما يستخدم Azure Maps إطارات تجانب بحجم 512 بكسل. يؤدي هذا إلى تقليل عدد طلبات الشبكة التي تحتاجها Azure Maps لتحميل نفس منطقة الخريطة مثل Bing Maps. ومع ذلك، نظرًا للطريقة التي تعمل بها أهرامات التجانب في عناصر تحكم الخريطة، فإن المربعات الأكبر حجمًا في Azure Maps تعني أنه لتحقيق نفس المنطقة القابلة للعرض كخريطة في Bing Maps، فإنك تحتاج إلى طرح مستوى التكبير / التصغير المستخدم في Bing Maps بمقدار 1 عند استخدام Azure Maps.

قبل: Bing Maps

يمكن نقل عنصر تحكم Bing Maps برمجيًّا باستخدام الدالة setView التي تتيح لك تحديد مركز الخريطة ومستوى التكبير / التصغير.

map.setView({
    mapTypeId: Microsoft.Maps.MapTypeId.aerial,
    center: new Microsoft.Maps.Location(35.0272, -111.0225),
    zoom: 15
});

بعد: Bing Maps

في Azure Maps، يمكن تغيير موضع الخريطة برمجيًّا باستخدام دالة الخريطة setCamera ويمكن تغيير نمط الخريطة باستخدام الدالة setStyle. الإحداثيات في خرائط Azure بتنسيق "خط الطول، خط العرض"، ويتم طرح قيمة مستوى التكبير/التصغير بمقدار 1.

map.setCamera({
    center: [-111.0225, 35.0272],
    zoom: 14
});

map.setStyle({
    style: 'satellite_road_labels'
});

المزيد من الموارد

• اختر نمط الخريطة
• أنماط الخرائط المدعومة

إضافة دبوس تثبيت

في خرائط Azure، هناك طرق متعددة يمكن من خلالها عرض بيانات النقطة على الخريطة؛

• تعرض HTML Markers نقاطًا باستخدام عناصر DOM التقليدية. تدعم علامات HTML السحب.
• تعرض Symbol Layer نقاطًا باستخدام رمز أو نص في سياق WebGL.
• تعرض Bubble Layer نقاطًا كدوائر على الخريطة. يمكن قياس أنصاف أقطار الدوائر على أساس الخصائص الموجودة في البيانات.

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

تضيف الأمثلة التالية علامة إلى الخريطة في (خط الطول: -0.2، خط العرض: 51.5) مع الرقم 10 مضاف كتسمية.

قبل: Bing Maps

باستخدام Bing Maps، تتم إضافة علامات إلى الخريطة باستخدام الفئة* Microsoft.Maps.Pushpin. يتم بعد ذلك إضافة دبابيس تثبيت إلى الخريطة باستخدام إحدى الوظيفتين.

تتمثل الدالة الأولى في إنشاء طبقة وإدخال دبوس التثبيت إليها ثم إضافة الطبقة إلى خاصية layers للخريطة.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    text: '10'
});

var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

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

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    text: '10'
});

map.entities.add(pushpin);

بعد: Azure Maps باستخدام علامات HTML

في خرائط Azure، يمكن استخدام علامات HTML لعرض نقطة على الخريطة بسهولة ويوصى بها للتطبيقات البسيطة التي تحتاج فقط إلى عرض بضع نقاط على الخريطة. لاستخدام علامة HTML، قم بإنشاء مثيل للفئة atlas.HtmlMarker، واضبط خيارات النص والموضع، وأضف العلامة إلى الخريطة باستخدام الدالة map.markers.add.

//Create a HTML marker and add it to the map.
map.markers.add(new atlas.HtmlMarker({
    text: '10',
    position: [-0.2, 51.5]
}));

بعد: Azure Maps باستخدام Symbol layer

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

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 type='text/javascript'>
        var map, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //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);

                //Create a point feature, add a property to store a label for it, and add it to the data source.
                datasource.add(new atlas.data.Feature(new atlas.data.Point([-0.2, 51.5]), {
                    label: '10'
                }));

                //Add a layer for rendering point data as symbols.
                map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                    textOptions: {
                        //Use the label property to populate the text for the symbols.
                        textField: ['get', 'label'],
                        color: 'white',
                        offset: [0, -1]
                    }
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

المزيد من الموارد

• إنشاء مصدر بيانات
• إضافة طبقة Symbol
• إضافة طبقة Bubble
• بيانات نقطة المجموعة
• إضافة علامات HTML
• استخدام تعبيرات النمط المبنية على البيانات
• خيارات أيقونة طبقة الرمز
• خيار نص طبقة Symbol
• فئة علامة HTML
• خيارات علامة HTML

إضافة دبوس تثبيت مخصص

يمكن استخدام الصور المخصصة لتمثيل النقاط على الخريطة. تُستخدم الصورة التالية في الأمثلة أدناه وتستخدم صورة مخصصة لعرض نقطة على الخريطة (خط العرض: 51.5، خط الطول: -0.2) وتعويض موضع العلامة بحيث تتم محاذاة نقطة رمز دبوس التثبيت مع الموضع الصحيح على الخريطة.

yellow-pushpin.png

قبل: Bing Maps

في Bing Maps، يجري إنشاء علامة مخصصة عن طريق تمرير عنوان URL إلى صورة في خيارات icon من دبوس التثبيت. يُستخدم الخيار anchor لمحاذاة نقطة صورة دبوس التثبيت مع الإحداثيات على الخريطة. قيمة السهم في Bing Maps بالنسبة إلى الزاوية العلوية اليسرى من الصورة.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    icon: 'ylw-pushpin.png',
    anchor: new Microsoft.Maps.Point(5, 30)
});

var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

بعد: Azure Maps باستخدام علامات HTML

لتخصيص علامة HTML في Azure Maps، يمكن تمرير string أو HTMLElement HTML إلى خيار العلامة htmlContent. في Azure Maps، يُستخدم خيار anchor لتحديد الموضع النسبي للعلامة بالنسبة إلى إحداثيات الموضع باستخدام واحدة من تسع نقاط مرجعية محددة؛ "مركز"، "أعلى"، "أسفل"، "يسار"، "يمين"، "أعلى اليسار"، "أعلى اليمين"، "أسفل اليسار"، "أسفل اليمين". يتم إرساء المحتوى ويتم توسيطه في "الأسفل" بشكل افتراضي. لتسهيل ترحيل التعليمات المرجعية من Bing Maps، قم بتعيين نقطة الارتساء على "أعلى اليسار"، ثم استخدم الخيار offset بنفس الإزاحة المستخدمة في Bing Maps. تتحرك الإزاحات في Azure Maps في الاتجاه المعاكس لـ Bing Maps، لذا اضربها في ناقص واحد.

تلميح

أضف pointer-events:none كنمط على محتوى HTML لتعطيل سلوك السحب الافتراضي في MS Edge الذي سيعرض رمزًا غير مرغوب فيه.

map.markers.add(new atlas.HtmlMarker({
    htmlContent: '<img src="ylw-pushpin.png" style="pointer-events: none;" />',
    anchor: 'top-left',
    pixelOffset: [-5, -30],
    position: [-0.2, 51.5]
}));

بعد: Azure Maps باستخدام Symbol layer

تدعم طبقات الرموز في Azure Maps الصور المخصصة أيضًا، ولكن أولًا، يجب تحميل الصورة إلى موارد الخريطة وتعيين معرف فريد. يمكن أن تشير طبقة الرمز بعد ذلك إلى هذا المعرف. يمكن إزاحة الرمز لمحاذاة النقطة الصحيحة في الصورة باستخدام خيار الرمز offset. في Azure Maps، يُستخدم خيار anchor لتحديد الموضع النسبي للرمز بالنسبة إلى إحداثيات الموضع باستخدام واحدة من تسع نقاط مرجعية محددة؛ "مركز"، "أعلى"، "أسفل"، "يسار"، "يمين"، "أعلى اليسار"، "أعلى اليمين"، "أسفل اليسار"، "أسفل اليمين". يتم تثبيت المحتوى ويتم تعيينه في "أسفل" افتراضيًّا، وهذا هو المركز السفلي لمحتوى HTML. لتسهيل ترحيل التعليمات المرجعية من Bing Maps، قم بتعيين نقطة الارتساء على "أعلى اليسار"، ثم استخدم الخيار offset بنفس الإزاحة المستخدمة في Bing Maps. تتحرك الإزاحات في Azure Maps في الاتجاه المعاكس لـ Bing Maps، لذا اضربها في ناقص واحد.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 type='text/javascript'>
        var map, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

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

                //Load the custom image icon into the map resources.
                map.imageSprite.add('my-yellow-pin', 'ylw-pushpin.png').then(function () {

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

                    //Create a point and add it to the data source.
                    datasource.add(new atlas.data.Point([-0.2, 51.5]));

                    //Add a layer for rendering point data as symbols.
                    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            //Set the image option to the id of the custom icon that was loaded into the map resources.
                            image: 'my-yellow-pin',
                            anchor: 'top-left',
                            offset: [-5, -30]
                        }
                    }));
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

تلميح

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

المزيد من الموارد

• إنشاء مصدر بيانات
• إضافة طبقة Symbol
• إضافة علامات HTML
• استخدام تعبيرات النمط المبنية على البيانات
• خيارات أيقونة طبقة الرمز
• خيار نص طبقة Symbol
• فئة علامة HTML
• خيارات علامة HTML

إضافة خط متصل

تُستخدم الخطوط المتصلة لتمثيل خط أو مسار على الخريطة. يوضح المثال التالي إنشاء خط متعدد متقطع على الخريطة.

قبل: Bing Maps

في Bing Maps، تأخذ فئة الخطوط المتصلة «Polyline» مجموعة من المواقع ومجموعة من الخيارات.

//Get the center of the map.
var center = map.getCenter();

//Create the polyline.
var polyline = new Microsoft.Maps.Polyline([
        center,
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude - 1),
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude + 1)
    ], {
        strokeColor: 'red',
        strokeThickness: 4,
        strokeDashArray: [3, 3]
    });

//Add the polyline to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(polyline);
map.layers.insert(layer);

بعد: Bing Maps

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

//Get the center of the map.
var center = map.getCamera().center;

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

//Create a line and add it to the data source.
datasource.add(new atlas.data.LineString([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5]
]));

//Add a layer for rendering line data.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 4,
    strokeDashArray: [3, 3]
}));

المزيد من الموارد

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

إضافة مضلع

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

قبل: Bing Maps

في Bing Maps، تأخذ فئة Polygon مجموعة من الإحداثيات أو حلقات الإحداثيات ومجموعة من الخيارات.

//Get the center of the map.
var center = map.getCenter();

//Create the polygon.
var polygon = new Microsoft.Maps.Polygon([
        center,
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude - 1),
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude + 1),
        center
    ], {
        fillColor: 'rgba(0, 255, 0, 0.5)',
        strokeColor: 'red',
        strokeThickness: 2
    });

//Add the polygon to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(polygon);
map.layers.insert(layer);

بعد: Bing Maps

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

//Get the center of the map.
var center = map.getCamera().center;

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

//Create a polygon and add it to the data source.
datasource.add(new atlas.data.Polygon([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5],
    center
]));

//Add a polygon layer for rendering the polygon area.
map.layers.add(new atlas.layer.PolygonLayer(datasource, null, {
    fillColor: 'rgba(0, 255, 0, 0.5)'
}));

//Add a line layer for rendering the polygon outline.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 2
}));

المزيد من الموارد

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

عرض مربع معلومات

يمكن عرض مزيد من المعلومات للكيان على الخريطة كفئة Microsoft.Maps.Infobox في خرائط Bing، في خرائط Azure يتم تحقيق ذلك باستخدام atlas.Popup الفئة . يضيف المثال التالي دبوس ضغط/علامة إلى الخريطة التي عند تحديدها، تعرض مربع معلومات/نافذة منبثقة.

قبل: Bing Maps

مع Bing Maps، يتم إنشاء مربع معلومات باستخدام المنشئ Microsoft.Maps.Infobox.

//Add a pushpin where we want to display an infobox.
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.6, -122.33));

//Add the pushpin to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

//Create an infobox and bind it to the map.
var infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(47.6, -122.33), {
    description: '<div style="padding:5px"><b>Hello World!</b></div>',
    visible: false
});
infobox.setMap(map);

//Add a click event to the pushpin to open the infobox.
Microsoft.Maps.Events.addHandler(pushpin, 'click', function () {
    infobox.setOptions({ visible: true });
});

بعد: Bing Maps

في خرائط Azure، يمكن استخدام نافذة منبثقة لعرض مزيد من المعلومات لموقع ما. يمكن تمرير كائن HTML string أو HTMLElement إلى خيار النافذة المنبثقة content. يمكن عرض النوافذ المنبثقة بشكل مستقل عن أي شكل إذا رغبت في ذلك، وبالتالي تتطلب تحديد قيمة position. لعرض نافذة منبثقة، اطلب الدالة open ومررها في الخريطة التي ستُعرض فيها النافذة المنبثقة.

//Add a marker to the map that to display a popup for.
var marker = new atlas.HtmlMarker({
    position: [-122.33, 47.6]
});

//Add the marker to the map.
map.markers.add(marker);

//Create a popup.
var popup = new atlas.Popup({
    content: '<div style="padding:10px"><b>Hello World!</b></div>',
    position: [-122.33, 47.6],
    pixelOffset: [0, -35]
});

//Add a click event to the marker to open the popup.
map.events.add('click', marker, function () {
    //Open the popup
    popup.open(map);
});

إشعار

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

المزيد من الموارد

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

تجمع دبوس تثبيت

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

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

إشعار

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

قبل: Bing Maps

في Bing Maps، يمكن تحميل بيانات GeoJSON باستخدام وحدة GeoJSON. يتم تجميع دبابيس التثبيت عن طريق التحميل في وحدة التجميع واستخدام طبقة التجميع التي تحتوي عليها.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(20, -160),
                zoom: 2
            });

            //Load the GeoJSON and Clustering modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.Clustering'], function () {

                //Load the GeoJSON data from a URL.
                Microsoft.Maps.GeoJson.readFromUrl(earthquakeFeed, function (pins) {

                    //Create a ClusterLayer with options and add it to the map.
                    clusterLayer = new Microsoft.Maps.ClusterLayer(pins, {
                        clusteredPinCallback: createCustomClusteredPin,
                        gridSize: 100
                    });

                    map.layers.insert(clusterLayer);
                });
            });
        }

        //A function that defines how clustered pins are rendered.
        function createCustomClusteredPin(cluster) {
            //Get the number of pushpins in the cluster
            var clusterSize = cluster.containedPushpins.length;

            var radius = 20;    //Default radius to 20 pixels.
            var fillColor = 'lime'; 	//Default to lime green.

            if (clusterSize >= 750) {
                radius = 40;   //If point_count >= 750, radius is 40 pixels.
                fillColor = 'red';    //If the point_count >= 750, color is red.
            } else if (clusterSize >= 100) {
                radius = 30;    //If point_count >= 100, radius is 30 pixels.
                fillColor = 'yellow';    //If the point_count >= 100, color is yellow.
            }

            //Create an SVG string of a circle with the specified radius and color.
            var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius * 2), '">',
                '<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', fillColor, '"/>',
                '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" style="font-size:12px;font-family:arial;fill:black;" >{text}</text>',
                '</svg>'];

            //Customize the clustered pushpin using the generated SVG and anchor on its center.
            cluster.setOptions({
                icon: svg.join(''),
                anchor: new Microsoft.Maps.Point(radius, radius),
                textOffset: new Microsoft.Maps.Point(0, radius - 8) //Subtract 8 to compensate for height of text.
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

بعد: Bing Maps

في Azure Maps، تتم إضافة البيانات وإدارتها بواسطة مصدر بيانات. تتصل الطبقات بمصادر البيانات وتعرض البيانات فيها. توفر الفئة DataSource في Azure Maps خيارات تجميع متعددة.

• cluster – يوضح مصدر المجموعة لبيانات نقطة المجموعة.
• clusterRadius - نصف القطر بالبكسل لتجميع النقاط معًا.
• clusterMaxZoom - الحد الأقصى لمستوى التكبير الذي يحدث به التجميع. ينتج عن أي تكبير/تصغير آخر جميع النقاط التي يتم عرضها كرمزات.
• clusterProperties - تعرف الخصائص المخصصة التي يتم حسابها باستخدام تعبيرات مقابل جميع النقاط داخل كل مجموعة وإضافتها إلى خصائص نقطة كل مجموعة.

عند تمكين التجميع، يرسل مصدر البيانات نقاط بيانات مجمعة وغير متفاوتة المسافات إلى طبقات للعرض. مصدر البيانات قادر على تجميع مئات الآلاف من نقاط البيانات. تحتوي نقطة بيانات مجمعة على الخصائص التالية:

اسم الخاصية	كتابة	الوصف
cluster	boolean	تشير إلى ما إذا كانت الميزة تمثل مجموعة.
cluster_id	سلسلة	معرّف فريد للمجموعة يمكن استخدامه مع فئات DataSource للدوال getClusterExpansionZoom، وgetClusterChildren، وgetClusterLeaves.
point_count	رقم	عدد النقاط التي تحتوي عليها المجموعة.
point_count_abbreviated	سلسلة	سلسلة تختصر القيمة point_count إذا كانت طويلة. (على سبيل المثال، 4,000 يصبح 4K)

DataSourceتحتوي الفئة على الدالة المساعد التالية للوصول إلى معلومات إضافية حول مجموعة باستخدام cluster_id.

الدالة	نوع الإرجاع	‏‏الوصف
getClusterChildren(clusterId: number)	Promise<Feature<Geometry, any> | Shape>	استرداد العناصر الفرعية للمجموعة المحددة في مستوى التكبير/التصغير التالي. يمكن أن تكون هذه العناصر الفرعية مزيجا من الأشكال والمجموعات الفرعية. المجموعات الفرعية هي ميزات مع خصائص مطابقة خصائص نظام المجموعة.
getClusterExpansionZoom(clusterId: number)	Promise<number>	حساب مستوى التكبير/التصغير الذي يبدأ نظام المجموعة في توسيعه أو تفريقه.
getClusterLeaves(clusterId: number, limit: number, offset: number)	Promise<Feature<Geometry, any> | Shape>	استرداد كافة النقاط في مجموعة. قم بتعيين limit لإرجاع مجموعة فرعية من النقاط، واستخدم offset الصفحة إلى خلال النقاط.

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

يمكن استيراد بيانات GeoJSON مباشرة في Azure Maps باستخدام الدالة importDataFromUrl في الفئة DataSource.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 type='text/javascript'>
        var map, datasource;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //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(null, {
                    //Tell the data source to cluster point data.
                    cluster: true
                });
                map.sources.add(datasource);

                //Create layers for rendering clusters, their counts and unclustered points and add the layers to the map.
                map.layers.add([
                    //Create a bubble layer for rendering clustered data points.
                    new atlas.layer.BubbleLayer(datasource, null, {
                        //Scale the size of the clustered bubble based on the number of points inthe cluster.
                        radius: [
                            'step',
                            ['get', 'point_count'],
                            20,         //Default of 20 pixel radius.
                            100, 30,    //If point_count >= 100, radius is 30 pixels.
                            750, 40     //If point_count >= 750, radius is 40 pixels.
                        ],

                        //Change the color of the cluster based on the value on the point_cluster property of the cluster.
                        color: [
                            'step',
                            ['get', 'point_count'],
                            'lime',            //Default to lime green. 
                            100, 'yellow',     //If the point_count >= 100, color is yellow.
                            750, 'red'         //If the point_count >= 750, color is red.
                        ],
                        strokeWidth: 0,
                        filter: ['has', 'point_count'] //Only rendered data points that have a point_count property, which clusters do.
                    }),

                    //Create a symbol layer to render the count of locations in a cluster.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            image: 'none' //Hide the icon image.
                        },
                        textOptions: {
                            textField: ['get', 'point_count_abbreviated'],
                            offset: [0, 0.4]
                        }
                    }),

                    //Create a layer to render the individual locations.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
                    })
                ]);

                //Retrieve a GeoJSON data set and add it to the data source. 
                datasource.importDataFromUrl(earthquakeFeed);
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

المزيد من الموارد

• إضافة طبقة Symbol
• إضافة طبقة Bubble
• بيانات نقطة المجموعة
• استخدام تعبيرات النمط المبنية على البيانات

إضافة خريطة التمثيل اللوني

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

يقوم المثال التالي بتحميل موجز GeoJSON لجميع الزلازل خلال الشهر الماضي من USGS، يتم عرضه كخريطة حرارية.

قبل: Bing Maps

في Bing Maps، لإنشاء خريطة التمثيل اللوني، قم بتحميل وحدة خريطة التمثيل اللوني. وبالمثل ، يتم تحميل وحدة GeoJSON لإضافة دعم لبيانات GeoJSON.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(20, -160),
                zoom: 2,
                mapTypeId: Microsoft.Maps.MapTypeId.aerial
            });

            //Load the GeoJSON and HeatMap modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.HeatMap'], function () {

                //Load the GeoJSON data from a URL.
                Microsoft.Maps.GeoJson.readFromUrl(earthquakeFeed, function (shapes) {

                    //Create a heat map and add it to the map.
                    var heatMap = new Microsoft.Maps.HeatMapLayer(shapes, {
                        opacity: 0.65,
                        radius: 10
                    });
                    map.layers.insert(heatMap);
                });
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

بعد: Bing Maps

في Azure Maps، حمل بيانات GeoJSON في مصدر بيانات ثم وصل مصدر البيانات بطبقة خريطة التمثيل اللوني. يمكن استيراد بيانات GeoJSON مباشرة في Azure Maps باستخدام الدالة importDataFromUrl في الفئة DataSource.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,
                style: 'satellite_road_labels',

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //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);

                //Load the earthquake data.
                datasource.importDataFromUrl(earthquakeFeed);

                //Create a layer to render the data points as a heat map.
                map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
                    opacity: 0.65,
                    radius: 10
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

المزيد من الموارد

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

تراكب طبقة تجانب

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

يراكب المثال التالي طبقة تجانب رادار الطقس من Iowa Environmental Mesonet لجامعة ولاية Iowa التي تستخدم مخطط تسمية X وY و Zoom.

قبل: Bing Maps

في Bing Maps، يمكن إنشاء طبقات التجانب باستخدام الفئة Microsoft.Maps.TileLayer.

var weatherTileLayer = new Microsoft.Maps.TileLayer({
    mercator: new Microsoft.Maps.TileSource({
        uriConstructor: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{zoom}/{x}/{y}.png'
    })
});
map.layers.insert(weatherTileLayer);

بعد: Bing Maps

في Azure Maps، يمكن إضافة طبقة تجانب إلى الخريطة بنفس طريقة إضافة أي طبقة أخرى. يُستخدم عنوان URL منسقًا يحتوي على عناصر نائبة x و y وعناصر التكبير النائبة {x}، {y}، {z}؛ على التوالي لإخبار التجانب بمكان الوصول إلى المربعات. تدعم طبقات التجانب في Azure Maps العناصر النائبة {quadkey}، و{bbox-epsg-3857}، و{subdomain}.

تلميح

في خرائط Azure، يمكن عرض الطبقات أسفل طبقات أخرى، بما في ذلك طبقات الخريطة الأساسية. غالبا ما يكون من المستحسن عرض طبقات تجانب أسفل تسميات الخريطة بحيث يسهل قراءتها. تأخذ الدالة map.layers.add معلمة ثانية وهي معرف الطبقة الثانية لإدراج الطبقة الجديدة أدناه. لإدراج طبقة تجانب أسفل تسميات الخريطة يمكن استخدام الكود التالي:

map.layers.add(myTileLayer, "labels");

//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png',
    opacity: 0.8,
    tileSize: 256
}), 'labels');

تلميح

يمكن التقاط طلبات التجانب باستخدام خيار الخريطة transformRequest. سيسمح لك هذا بتعديل أو إضافة رؤوس إلى الطلب إذا رغبت في ذلك.

المزيد من الموارد

• إضافة طبقات متجانبة
• فئة طبقة التجانب
• خيارات طبقة التجانب

إظهار بيانات استخدام الشبكة

يمكن تراكب بيانات نسبة استخدام الشبكة على كل من Azure Maps وBing Maps.

قبل: Bing Maps

في Bing Maps، يمكن تراكب بيانات حركة البيانات على الخريطة باستخدام وحدة حركة البيانات.

Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', function () {
    var manager = new Microsoft.Maps.Traffic.TrafficManager(map);
    manager.show();
});

بعد: Bing Maps

توفر Azure Maps عدة خيارات مختلفة لعرض تدفق حركة البيانات. يمكن عرض حوادث حركة المرور، مثل إغلاق الطرق والحوادث كرموز على الخريطة. يمكن تغلغل تدفق حركة المرور، والطرق المشفرة بالألوان، على الخريطة ويمكن تعديل الألوان بالنسبة إلى حد السرعة المنشور، بالنسبة للتأخير المتوقع العادي، أو التأخير المطلق. يتم تحديث بيانات الحوادث في Azure Maps كل دقيقة، ويتم تحديث بيانات التدفق كل دقيقتين.

map.setTraffic({
    incidents: true,
    flow: 'relative'
});

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

المزيد من الموارد

• إظهار نسبة استخدام الشبكة على الخريطة
• خيارات تراكب نسبة استخدام الشبكة
• عنصر التحكم في حركة البيانات

إضافة تراكب أرضي

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

قبل: Bing Maps

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

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.740, -74.18),
                zoom: 12
            });

            var overlay = new Microsoft.Maps.GroundOverlay({
                //Create a LocationRect from the edges of the bounding box; north, west, south, east.
                bounds: Microsoft.Maps.LocationRect.fromEdges(40.773941, -74.22655, 40.712216, -74.12544),
                imageUrl: 'newark_nj_1922.jpg'
            });
            map.layers.insert(overlay);
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

يؤدي تشغيل هذه التعليمة البرمجية في مستعرض إلى عرض خريطة تشبه الصورة التالية:

بعد: Bing Maps

في Azure Maps، يمكن تراكب الصور ذات المرجعية الجغرافية باستخدام الفئة atlas.layer.ImageLayer. تتطلب هذه الفئة عنوان URL لصورة ومجموعة من الإحداثيات للزوايا الأربع للصورة. يجب أن تتم استضافة الصورة إما على نفس المجال أو تمكين CORs.

تلميح

إذا كان لديك فقط معلومات عن الشمال والجنوب والشرق والغرب والدوران، وليس لديك إحداثيات لكل ركن من أركان الصورة، فيمكنك استخدام الدالة atlas.layer.ImageLayer.getCoordinatesFromEdges function.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 type='text/javascript'>
        var map;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-74.18, 40.740],
                zoom: 12,

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

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

                //Create an image layer and add it to the map.
                map.layers.add(new atlas.layer.ImageLayer({
                    url: 'newark_nj_1922.jpg',
                    coordinates: [
                        [-74.22655, 40.773941], //Top Left Corner
                        [-74.12544, 40.773941], //Top Right Corner
                        [-74.12544, 40.712216], //Bottom Right Corner
                        [-74.22655, 40.712216]  //Bottom Left Corner
                    ]
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

المزيد من الموارد

• تراكب صورة
• فئة طبقة الصورة

إضافة بيانات KML إلى الخريطة

يمكن لكل من خرائط Azure وBing استيراد بيانات KML وKMZ وGeoRSS وGeoJSON وWell-Known Text (WKT) وعرضها على الخريطة. تدعم Azure Maps أيضًا ملفات GPX وGML وملفات CSV المكانية وخدمات خرائط الويب (WMS) وخدمات تجانب خرائط الويب (WMTS) وخدمات ميزات الويب (WFS).

قبل: Bing Maps

يؤدي تشغيل هذه التعليمة البرمجية في مستعرض إلى عرض خريطة تشبه الصورة التالية:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.747, -73.985),
                zoom: 12
            });
                
            Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () {
                var callback = function (dataset) {
                    if (dataset.shapes) {
                        var l = new Microsoft.Maps.Layer();
                        l.add(dataset.shapes);
                        map.layers.insert(l);
                    }
                    if (dataset.layers) {
                        for (var i = 0, len = dataset.layers.length; i < len; i++) {
                            map.layers.insert(dataset.layers[i]);
                        }
                    }
                };
                Microsoft.Maps.GeoXml.readFromUrl('myKMLFile.kml', { error: function (msg) { alert(msg); } }, callback);
            });                
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

بعد: Bing Maps

في خرائط Azure، GeoJSON هو تنسيق البيانات الرئيسي المستخدم في SDK الويب، ويمكن دمج المزيد من تنسيقات البيانات المكانية بسهولة في استخدام وحدة IO المكانية. هذه الوحدة لديها وظائف لكل من قراءة وكتابة البيانات المكانية، وتتضمن أيضًا طبقة بيانات بسيطة يمكنها بسهولة عرض البيانات من أي من أشكال البيانات المكانية هذه. لقراءة البيانات في ملف بيانات مكاني، مرر في عنوان URL، أو البيانات الأولية كسلسلة أو كائن تخزين بيانات ثنائية كبيرة في الدالة atlas.io.read. يؤدي ذلك إلى إرجاع كافة البيانات التي تم تحليلها من الملف التي يمكن إضافتها بعد ذلك إلى الخريطة. KML هو أكثر تعقيدًا قليلًا من تنسيق البيانات المكانية، كما أنه يتضمن الكثير من معلومات التصميم. SpatialDataLayer تدعم الفئة عرض معظم هذه الأنماط، ولكن يجب تحميل صور الأيقونات في الخريطة قبل تحميل بيانات الميزة، ويجب إضافة التراكبات الأرضية كطبقات إلى الخريطة بشكل منفصل. عند تحميل البيانات عبر عنوان URL، يجب استضافتها على نقطة نهاية ممكنة لـ CORs، أو يجب تمرير خدمة وكيل كخيار في وظيفة القراءة.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 reference to the Azure Maps Spatial IO module. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>

    <script type='text/javascript'>
        var map, datasource, layer;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //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 simple data layer for rendering the data.
                layer = new atlas.layer.SimpleDataLayer(datasource);
                map.layers.add(layer);

                //Read a KML file from a URL or pass in a raw KML string.
                atlas.io.read('myKMLFile.kml').then(async r => {
                    if (r) {

                        //Check to see if there are any icons in the data set that need to be loaded into the map resources.
                        if (r.icons) {
                            //For each icon image, create a promise to add it to the map, then run the promises in parrallel.
                            var imagePromises = [];

                            //The keys are the names of each icon image.
                            var keys = Object.keys(r.icons);

                            if (keys.length !== 0) {
                                keys.forEach(function (key) {
                                    imagePromises.push(map.imageSprite.add(key, r.icons[key]));
                                });

                                await Promise.all(imagePromises);
                            }
                        }

                        //Load all features.
                        if (r.features && r.features.length > 0) {
                            datasource.add(r.features);
                        }

                        //Load all ground overlays.
                        if (r.groundOverlays && r.groundOverlays.length > 0) {
                            map.layers.add(r.groundOverlays);
                        }

                        //If bounding box information is known for data, set the map view to it.
                        if (r.bbox) {
                            map.setCamera({ bounds: r.bbox, padding: 50 });
                        }
                    }
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

المزيد من الموارد

• دالة atlas.io.read
• SimpleDataLayer
• SimpleDataLayerOptions

إضافة أدوات الرسم

يوفر كل من Bing و خرائط Azure وحدة نمطية لتمكين المستخدم من رسم الأشكال وتحريرها على الخريطة باستخدام الماوس أو أجهزة الإدخال الأخرى. كلاهما يدعم رسم دبابيس التثبيت والخطوط والمضلعات. يوفر Azure Maps أيضًا خيارات لرسم الدوائر والمستطيلات.

قبل: Bing Maps

في Bing Maps، يتم تحميل الوحدة DrawingTools باستخدام الدالة Microsoft.Maps.loadModule. بمجرد التحميل، يمكن إنشاء مثيل لفئة DrawingTools وتُسمى الدالة showDrawingManagerإضافة شريط أدوات إلى الخريطة.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
    var map, drawingManager;

    function initMap() {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: '<Your Bing Maps Key>'
        });

        //Load the DrawingTools module
        Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
            //Create an instance of the DrawingTools class and bind it to the map.
            var tools = new Microsoft.Maps.DrawingTools(map);

            //Show the drawing toolbar and enable editting on the map.
            tools.showDrawingManager(function (manager) {
                //Store a reference to the drawing manager as it will be useful later.
                drawingManager = manager;
            });
        });
    }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

بعد: Bing Maps

في خرائط Azure، يجب تحميل الوحدة النمطية لأدوات الرسم عن طريق تحميل ملفات JavaScript وCSS التي تحتاج إلى الرجوع إليها في التطبيق. بمجرد تحميل الخريطة، يمكن إنشاء مثيل للفئة DrawingManager وإرفاق مثيل DrawingToolbar .

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.js"></script>
    
    <script type='text/javascript'>
        var map, drawingManager;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.                
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

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

                //Create an instance of the drawing manager and display the drawing toolbar.
                drawingManager = new atlas.drawing.DrawingManager(map, {
                    toolbar: new atlas.control.DrawingToolbar({ position: 'top-left' })
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

تلميح

في طبقات Azure Maps، توفر أدوات الرسم طرقًا متعددة يمكن للمستخدمين من خلالها رسم الأشكال. على سبيل المثال، عند رسم مضلع، يمكن للمستخدم النقر لإضافة كل نقطة، أو الضغط باستمرار على زر الماوس الأيسر واسحب الماوس لرسم مسار. يمكن تعديل هذا باستخدام خيار interactionType في DrawingManager .

المزيد من الموارد

• استخدام وحدة أدوات الرسم
• نماذج التعليمات البرمجية لوحدة أدوات الرسم

الموارد الإضافية

إلقاء نظرة على وحدات Azure Maps Web SDK مفتوحة المصدر. توفر هذه الوحدات النمطية المزيد من الوظائف وقابلة للتخصيص بالكامل.

مراجعة نماذج التعليمات البرمجية ذات الصلة بترحيل ميزات Bing Maps الأخرى:

مؤثرات عرض البيانات

طبقة إحاطة

الخدمات

البحث عن نقاط الاهتمام

الحصول على معلومات من إحداثيات (رمز جغرافي عكسي)

إظهار الاتجاهات من A إلى B

البحث عن Autosuggest باستخدام JQuery UI

تعرف على المزيد حول Azure Maps Web SDK.

كيفية استخدام عنصر تحكم الخريطة

كيفية استخدام وحدة أدوات الرسم

نماذج التعليمات البرمجية

الوثائق المرجعية لـ Azure Maps Web SDK Service API

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

تعرف على المزيد حول الترحيل من Bing Maps إلى Azure Maps.

ترحيل خدمة ويب