إضافة طبقة رمز إلى خريطة

مقالة
06/16/2023

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

يتم عرض طبقات الرموز باستخدام WebGL. استخدم طبقة رمز لعرض مجموعات كبيرة من النقاط على الخريطة. مقارنة بعلامة HTML، تعرض طبقة الرمز عددًا كبيرًا من بيانات النقطة على الخريطة، مع أداء أفضل. ومع ذلك، لا تدعم طبقة الرمز عناصر CSS وHTML التقليدية للتصميم.

تلميح

ستعرض طبقات الرموز بشكل افتراضي إحداثيات جميع الأشكال الهندسية في مصدر بيانات. للحد من الطبقة بحيث تعرض فقط ميزات هندسة النقاط، قم بتعيين خاصية filter للطبقة إلى ['==', ['geometry-type'], 'Point'] أو ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] إذا أردت، يمكنك تضمين ميزات مجموعة النقاط أيضًا.

يقوم مدير صور الخرائط بتحميل الصور المخصصة المستخدمة من قِبل طبقة الرمز. حيث يدعم تنسيقات الصور التالية:

JPEG
PNG
SVG
BMP
GIF (بدون رسوم متحركة)

إضافة طبقة رمز

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

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

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

//Create a symbol layer to render icons and/or text at points on the map.
var layer = new atlas.layer.SymbolLayer(dataSource);

//Add the layer to the map.
map.layers.add(layer);

//Create a point and add it to the data source.
dataSource.add(new atlas.data.Point([0, 0]));

هناك أربعة أنواع مختلفة من بيانات النقاط التي يمكن إضافتها إلى الخريطة:

هندسة نقطة GeoJSON - يحتوي هذا الكائن فقط على إحداثيات نقطة ولا يحتوي على أي شيء آخر. يمكن استخدام فئة مساعد atlas.data.Point لإنشاء هذه الكائنات بسهولة.
هندسة GeoJSON متعددة النقاط - يحتوي هذا الكائن على إحداثيات نقاط متعددة ولا يحتوي على أي شيء آخر. يمكن استخدام فئة مساعد atlas.data.MultiPoint لإنشاء هذه الكائنات بسهولة.
ميزة GeoJSON - يتكون هذا الكائن من أي هندسة GeoJSON ومجموعة من الخصائص التي تحتوي على بيانات تعريف مرتبطة بالهندسة. يمكن استخدام فئة مساعد atlas.data.Feature لإنشاء هذه الكائنات بسهولة.
الفئة atlas.Shape مشابهة لميزة GeoJSON. تتكون كلتاهما من هندسة GeoJSON ومجموعة من الخصائص التي تحتوي على بيانات تعريف مرتبطة بالهندسة. إذا تمت إضافة كائن GeoJSON إلى مصدر بيانات، يمكن عرضه بسهولة في طبقة. ومع ذلك، إذا تم تحديث خاصية الإحداثيات لكائن GeoJSON هذا، فلن يتغير مصدر البيانات والخريطة. وذلك لأنه لا توجد آلية في كائن JSON لتشغيل تحديث. توفر فئة الشكل وظائف لتحديث البيانات التي تحتوي عليها. عند إجراء تغيير، يتم إعلام مصدر البيانات والخريطة وتحديثها تلقائيًا.

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

function InitMap()
{
    var map = new atlas.Map('myMap', {
        center: [-122.33, 47.64],
        zoom: 13,
        view: "Auto",

        //Add authentication details for connecting to Azure Maps.
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }
    });

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

      /*Create a data source and add it to the map*/
      var dataSource = new atlas.source.DataSource();
      map.sources.add(dataSource);
      var point = new atlas.Shape(new atlas.data.Point([-122.33, 47.64]));
      //Add the symbol to the data source.
      dataSource.add([point]);

      /* Gets co-ordinates of clicked location*/
      map.events.add('click', function(e){
        /* Update the position of the point feature to where the user clicked on the map. */
        point.setCoordinates(e.position);
      });

      //Create a symbol layer using the data source and add it to the map
      map.layers.add(new atlas.layer.SymbolLayer(dataSource, null));
    });
}

لقطة شاشة للخريطة مع إضافة دبوس باستخدام طبقة الرمز.

تلميح

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

إضافة أيقونة مخصصة إلى طبقة رمز

يتم عرض طبقات الرموز باستخدام WebGL. على هذا النحو، يتعين تحميل جميع الموارد، مثل صور الأيقونات، في سياق WebGL. يوضح هذا النموذج كيفية إضافة أيقونة مخصصة إلى موارد الخريطة. ثم يُستخدم هذا الرمز لعرض بيانات النقاط برمز مخصص على الخريطة. تتطلب خاصية textField الخاصة بطبقة الرمز تحديد تعبير. في هذه الحالة، نريد عرض خاصية درجة الحرارة. نظرًا لأن درجة الحرارة عبارة عن رقم، فإنه يجب تحويلها إلى سلسلة. بالإضافة إلى ذلك، نريد إلحاق "°F" بها. يمكن استخدام تعبير للقيام بهذا التسلسل؛ ['concat', ['to-string', ['get', 'temperature']], '°F'].

function InitMap()
{
    var map = new atlas.Map('myMap', {
        center: [-73.985708, 40.75773],
        zoom: 12,
        view: "Auto",

        //Add authentication details for connecting to Azure Maps.
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }
    });

    map.events.add('ready', function () {

      //Load the custom image icon into the map resources.
      map.imageSprite.add('my-custom-icon', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/showers.png').then(function () {

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

        //Create a point feature and add it to the data source.
        datasource.add(new atlas.data.Feature(new atlas.data.Point([-73.985708, 40.75773]), {
          temperature: 64
        }));

        //Add a layer for rendering point data as symbols.
        map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
          iconOptions: {
            //Pass in the id of the custom icon that was loaded into the map resources.
            image: 'my-custom-icon',

            //Optionally scale the size of the icon.
            size: 0.5
          },
          textOptions: {
            //Convert the temperature property of each feature into a string and concatenate "°F".
            textField: ['concat', ['to-string', ['get', 'temperature']], '°F'],

            //Offset the text so that it appears on top of the icon.
            offset: [0, -2]
          }
        }));
      });
    });
}

تلميح

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

تخصيص طبقة رمز

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

لقطة شاشة للخريطة مع لوحة على الجانب الأيسر من الخريطة مع خيارات الرموز المختلفة التي يمكن تعيينها بشكل تفاعلي.