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

توضح لك هذه المقالة كيفية عرض مناطق Polygon وMultiPolygon الأشكال الهندسية للمعالم على الخريطة باستخدام طبقة المضلع. يدعم خرائط Azure Web SDK أيضًا إنشاء هندسة الدائرة كما هو محدد في مخطط GeoJSON الموسع. يتم تحويل هذه الدوائر إلى مضلعات عند عرضها على الخريطة. يمكن تحديث جميع هندسة الميزات بسهولة عند التفافها مع فئة atlas.Shape.

استخدم طبقة المضلع

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

يوضح نموذج التعليمات البرمجية التالي إنشاء طبقة مضلع تغطي الحديقة المركزية لمدينة نيويورك بمضلع أحمر.

 
function InitMap()
{
  var map = new atlas.Map('myMap', {
    center: [-73.97, 40.78],
    zoom: 11,
    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);

    /*Create a rectangle*/
    dataSource.add(new atlas.Shape(new atlas.data.Feature(
    new atlas.data.Polygon([[
      [-73.98235, 40.76799],
      [-73.95785, 40.80044],
      [-73.94928, 40.7968],
      [-73.97317, 40.76437],
      [-73.98235, 40.76799]
    ]])
    )));

    /*Create and add a polygon layer to render the polygon to the map*/
    map.layers.add(new atlas.layer.PolygonLayer(dataSource, null,{
    fillColor: "red",
    fillOpacity: 0.7
    }), 'labels')
  });
}

استخدم طبقة المضلع والخط معاً

تُستخدم طبقة خطية لتقديم مخطط المضلعات. يعرض نموذج التعليمة البرمجية التالي مضلعاً مثل المثال السابق، ولكنه يضيف الآن طبقة خطية. طبقة الخط هذه هي طبقة ثانية متصلة بمصدر البيانات.

function InitMap()
{
  var map = new atlas.Map('myMap', {
    center: [-73.97, 40.78],
    zoom: 11,
    view: "Auto",
    
    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Get an Azure Maps key at https://azuremaps.com/.
      authType: 'subscriptionKey',
      subscriptionKey: '{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);

    /*Create a rectangle*/
    dataSource.add(new atlas.data.Polygon([[
    [-73.98235, 40.76799],
    [-73.95785, 40.80045],
    [-73.94928, 40.7968],
    [-73.97317, 40.76437],
    [-73.98235, 40.76799]
    ]])
          );

    //Create a polygon layer to render the filled in area of the polygon.
    var polygonLayer = new atlas.layer.PolygonLayer(dataSource, 'myPolygonLayer', {
    fillColor: 'rgba(0, 200, 200, 0.5)'
    });

    //Create a line layer for greater control of rendering the outline of the polygon.
    var lineLayer = new atlas.layer.LineLayer(dataSource, 'myLineLayer', {
    strokeColor: 'red',
    strokeWidth: 2
    });

    /*Create and add a polygon layer to render the polygon to the map*/
    map.layers.add([polygonLayer, lineLayer])
  });
}

املأ المضلع بنمط

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

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

تلميح

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

تخصيص طبقة مضلع

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

إضافة دائرة إلى الخريطة

يستخدم خرائط Azure إصدارا موسعا من مخطط GeoJSON الذي يوفر تعريفا للدوائر. يتم عرض دائرة على الخريطة عن طريق إنشاء ميزة Point. يحتوي Point هذا على subType خاصية بقيمة "Circle" وradius برقم يمثل نصف القطر بالعدادات.

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-122.126986, 47.639754]
    },
    "properties": {
        "subType": "Circle",
        "radius": 100
    }
}  

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

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: {
      // Get an Azure Maps key at https://azuremaps.com/.
      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);

    //Create a circle
    dataSource.add(new atlas.data.Feature(new atlas.data.Point([-73.985708, 40.75773]), 
    {
      subType: "Circle",
      radius: 1000
    }));

    // Create a polygon layer to render the filled in area
    // of the circle polygon, and add it to the map.
    map.layers.add(new atlas.layer.PolygonLayer   (dataSource, null, {
      fillColor: 'rgba(0, 200, 200, 0.8)'
    }));
  });
}

تسهيل تحديث الهندسة

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

//Creating a shape by passing in a geometry and a object containing properties.
var shape1 = new atlas.Shape(new atlas.data.Point[0,0], { myProperty: 1 });

//Creating a shape using a feature.
var shape2 = new atlas.Shape(new atlas.data.Feature(new atlas.data.Point[0,0], { myProperty: 1 });

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

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

تعرّف على المزيد حول الفئات والأساليب المُستخدمة في هذه المقالة:

مضلع

PolygonLayer

PolygonLayerOptions

لمزيدٍ من أمثلة التعليمات البرمجية لإضافتها إلى الخرائط، راجع المقالات التالية:

إنشاء مصدر بيانات

إضافة نافذة منبثقة

استخدام تعبيرات النمط المبنية على البيانات

كيفية استخدام قوالب الصور

إضافة طبقة خط

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

ملحق مواصفات خرائط Azure GeoJSON