إنشاء خريطة

مقالة
06/15/2023

توضح لك هذه المقالة طرق إنشاء خريطة وتحريكها.

تحميل خريطة

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

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

لقطة شاشة تعرض شبكة الانطباق على الخريطة.

تلميح

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

إظهار نسخة واحدة من العالم

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

//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false

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

عند إنشاء خريطة هناك، هناك عدة أنواع مختلفة من الخيارات التي يمكن تمريرها لتخصيص كيفية عمل الخريطة:

يتم استخدام CameraOptions وCameraBoundOptions لتحديد المنطقة التي يجب أن تعرضها الخريطة.
يتم استخدام ServiceOptions لتحديد كيفية تفاعل الخريطة مع الخدمات التي تعمل على تشغيل الخريطة.
يتم استخدام StyleOptions لتحديد الخريطة التي يجب تصميمها وعرضها.
يتم استخدام UserInteractionOptions لتحديد كيفية وصول الخريطة عندما يتفاعل المستخدم مع الخريطة.

يمكن أيضاً تحديث هذه الخيارات بعد تحميل الخريطة باستخدام الدالات setCamera وsetServiceOptions وsetStyle وsetUserInteraction.

التحكم في كاميرا الخريطة

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

تعيين الكاميرا

تتحكم كاميرا الخريطة فيما يتم عرضه في منفذ عرض لوحة الخريطة. يمكن تمرير خيارات الكاميرا إلى خيارات الخريطة عند تهيئتها أو تمريرها إلى وظيفة الخرائط setCamera.

// Set the camera options when creating the map.
// Map properties, such as center and zoom level, are part of the CameraOptions
var map = new atlas.Map('map', {
    center: [-122.33, 47.6],
    zoom: 12

    //Additional map options.
};

//Update the map camera at anytime using setCamera function.
map.setCamera({
    center: [-110, 45],
    zoom: 5 
});

تعد خصائص الخريطة، مثل مستوى الوسط والتكبير/التصغير، جزءا من خصائص CameraOptions .

تعيين حدود الكاميرا

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

map.setCamera({
    bounds: [-122.4, 47.6, -122.3, 47.7],
    padding: 10
});

في التعليمات البرمجية التالية، يتم إنشاء كائن خريطة عبر new atlas.Map(). يمكن تعريف خصائص الخريطة مثل CameraBoundsOptions عبر دالة setCamera لفئة الخريطة. يتم تعيين الحدود وخصائص المساحة باستخدام setCamera.

تحريك عرض الخريطة

عند تعيين خيارات الكاميرا للخريطة، يمكن أيضاً تعيين خيارات الحركة. تحدد هذه الخيارات نوع الرسوم المتحركة والمدة التي يجب أن تستغرقها لتحريك الكاميرا.

map.setCamera({
    center: [-122.33, 47.6],
    zoom: 12,
    duration: 1000,
    type: 'fly'  
});

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

<!DOCTYPE html>
 <html>
 <head>

    <!-- 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: [-122.33, 47.6],
        zoom: 12,
        view: 'Auto',
        style: 'road',

      
        // Add authentication details for connecting to Azure Maps.
        authOptions: {
          // Get an Azure Maps key at https://azuremaps.com/.
          authType: 'subscriptionKey',
          subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }      
      });
    }
    
    /* Animate map view to set camera location
       to random points on the map*/
    function animateMap() {
      map.setCamera({
      zoom: Math.random() *2 + 12,
      duration: 1000,
      type: 'fly'  
      });
    }
  </script>

  <style>
    button {
      position: absolute;
      top: 10px;
      left: 10px;
    }  
  </style>

</head>

<html style='width:100%;height:100%;'> 
  <body onload="InitMap()" style='width:100%;height:100%;padding:0;margin:0;'> 
    <div id='myMap' style='position:relative;width:100%;height:100%;'></div>
  <button onclick="animateMap()">Animate Maps</button>
  <div id="my-text-box"></div>
  </body>
</html>

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

طلب التحويلات

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

أضف المزيد من الرؤوس إلى طلبات التجانب للخدمات المحمية بكلمة مرور.
تعديل عناوين URL لتشغيل الطلبات من خلال خدمة وكيل.

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

transformRequest: (url: string, resourceType: string) => RequestParameters

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

خيار	النوع	الوصف
هيئة	سلسلة	نص طلب POST.
بيانات الاعتماد	`'same-origin'` \| `'include'`	يستخدم لتحديد إعداد بيانات اعتماد الطلب عبر المنشأ (CORs). استخدم "تضمين" لإرسال ملفات تعريف الارتباط مع طلبات عبر الأصل.
الرؤوس	عنصر	العناوين التي سيتم إرسالها مع الطلب. الكائن هو زوج قيم مفتاح من قيم السلسلة.
أسلوب	`'GET'` \| `'POST'` \| `'PUT'`	نوع الطلب الذي سيتم تقديمه. الافتراضي هو `'GET'`.
النوع	`'string'` \| `'json'` \| `'arrayBuffer'`	تنسيق نص استجابة POST.
عنوان url	سلسلة	عنوان URL المطلوب.

يتم سرد أنواع الموارد الأكثر صلة بالمحتوى الذي تضيفه إلى الخريطة في الجدول التالي:

نوع المورد	الوصف
صورة	طلب لصورة للاستخدام مع إما SymbolLayer أو ImageLayer.
المصدر	طلب للحصول على معلومات المصدر، مثل طلب TileJSON. تستخدم بعض الطلبات من أنماط الخريطة الأساسية أيضا نوع المورد هذا عند تحميل معلومات المصدر.
التجانب	طلب من طبقة تجانب (نقطي أو متجه).
WFS	طلب من `WfsClient` في وحدة الإدخال/الإخراج المكانية إلى خدمة ميزة ويب OGC. لمزيد من المعلومات، راجع الاتصال بخدمة WFS.
WebMapService	طلب من `OgcMapLayer` في وحدة الإدخال/الإخراج المكانية إلى خدمة WMS أو WMTS. لمزيد من المعلومات، راجع إضافة طبقة خريطة من Open Geospatial Consortium (OGC).

فيما يلي بعض أنواع الموارد، التي يتم تجاهلها عادة، والتي يتم تمريرها من خلال تحويل الطلب وترتبط بأنماط الخريطة الأساسية: StyleDefinitions، Style، SpriteImage، SpriteJSON، Glyphs، Attribution.

يوضح المثال التالي كيفية تعديل جميع الطلبات إلى الحجم https://example.com عن طريق إضافة اسم مستخدم وكلمة مرور كرؤوس إلى الطلب.

var map = new atlas.Map('myMap', {
    transformRequest: function (url, resourceType) {
        //Check to see if the request is to the specified endpoint.
        if (url.indexOf('https://examples.com') > -1) {
            //Add custom headers to the request.
            return {
                url: url,
                header: {
                    username: 'myUsername',
                    password: 'myPassword'
                }
            };
        }

        //Return the URL unchanged by default.
        return { url: url };
    },

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