إضافة مستوى مضلع إلى الخريطة في iOS SDK (إصدار أولي)

توضح لك هذه المقالة كيفية عرض مناطق Polygon وMultiPolygon الأشكال الهندسية للمعالم على الخريطة باستخدام طبقة المضلع.

إشعار

خرائط Azure إيقاف iOS SDK

تم الآن إهمال خرائط Azure Native SDK لنظام التشغيل iOS وسيتم إيقافه في 3/31/25. لتجنب انقطاع الخدمة، قم بالترحيل إلى خرائط Azure Web SDK بحلول 3/31/25. لمزيد من المعلومات، راجع دليل ترحيل خرائط Azure iOS SDK.

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

تأكد من إكمال الخطوات الواردة في تشغيل سريع: أنشئ تطبيق مستند iOS. يمكن إدراج كتل التعليمة البرمجية في هذه المقالة في وظيفة viewDidLoad الخاصة بـ ViewController.

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

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

// Create a data source and add it to the map.
let source = DataSource()
map.sources.add(source)

// Create a rectangular polygon.
source.add(geometry: Polygon([
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235),
    CLLocationCoordinate2D(latitude: 40.80044, longitude: -73.95785),
    CLLocationCoordinate2D(latitude: 40.79680, longitude: -73.94928),
    CLLocationCoordinate2D(latitude: 40.76437, longitude: -73.97317),
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235)
]))

// Create and add a polygon layer to render the polygon on the map, below the label layer.
map.layers.insertLayer(
    PolygonLayer(source: source, options: [
        .fillColor(.red),
        .fillOpacity(0.7)
    ]),
    below: "labels"
)

تُظهر لقطة الشاشة التالية التعليمة البرمجية أعلاه التي تعرض مساحة المضلع باستخدام مستوى المضلع.

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

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

// Create a data source and add it to the map.
let source = DataSource()
map.sources.add(source)

// Create a rectangular polygon.
source.add(geometry: Polygon([
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235),
    CLLocationCoordinate2D(latitude: 40.80044, longitude: -73.95785),
    CLLocationCoordinate2D(latitude: 40.79680, longitude: -73.94928),
    CLLocationCoordinate2D(latitude: 40.76437, longitude: -73.97317),
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235)
]))

// Create and add a polygon layer to render the polygon on the map, below the label layer.
map.layers.insertLayer(
    PolygonLayer(source: source, options: [
        .fillColor(UIColor(red: 0, green: 0.78, blue: 0.78, alpha: 0.5))
    ]),
    below: "labels"
)

// Create and add a line layer to render the outline of the polygon.
map.layers.addLayer(LineLayer(source: source, options: [
    .strokeColor(.red),
    .strokeWidth(2)
]))

تُظهر لقطة الشاشة التالية التعليمة البرمجية أعلاه الذي يعرض مضلعاً مع عرض مخططه باستخدام طبقة خط.

تلميح

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

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

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

// Load an image pattern into the map image sprite.
map.images.add(UIImage(named: "fill-checker-red")!, withID: "fill-checker-red")

// Create a data source and add it to the map.
let source = DataSource()
map.sources.add(source)

// Create a polygon.
source.add(geometry: Polygon([
    CLLocationCoordinate2D(latitude: -20, longitude: -50),
    CLLocationCoordinate2D(latitude: 40, longitude: 0),
    CLLocationCoordinate2D(latitude: -20, longitude: 50),
    CLLocationCoordinate2D(latitude: -20, longitude: -50)
]))

// Create and add a polygon layer to render the polygon on the map, below the label layer.
map.layers.insertLayer(
    PolygonLayer(source: source, options: [
        .fillPattern("fill-checker-red"),
        .fillOpacity(0.5)
    ]),
    below: "labels"
)

بالنسبة لهذه العينة، تم تحميل الصورة التالية في مجلد الأصول للتطبيق.

fill-checker-red.png

فيما يلي لقطة شاشة للتعليمة البرمجية أعلاه الذي يعرض مضلعاً بنمط تعبئة على الخريطة.

معلومات إضافية

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

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