إضافة طبقة مضلع إلى الخريطة في iOS SDK (معاينة)

مقالة
04/06/2022
قراءة خلال 2 دقائق

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

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

تأكد من إكمال الخطوات الواردة في التشغيل السريع: إنشاء مستند تطبيق 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`

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

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

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