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

  • مقالة
  • قراءة خلال 5 دقائق

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

تلميح

ستقوم طبقات الخطوط افتراضيا بعرض إحداثيات المضلعات وكذلك الخطوط في مصدر بيانات. لتقييد الطبقة بحيث تعرض فقط ميزات هندسة LineString ، اضبط filter خيار الطبقة على NSPredicate(format: "%@ == \"LineString\"", NSExpression.geometryTypeAZMVariable). إذا كنت ترغب في تضمين ميزات MultiLineString أيضا ، فاستخدم NSCompoundPredicate.

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

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

إضافة طبقة سطر

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

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

// Create a list of points.
let points = [
    CLLocationCoordinate2D(latitude: 40.74327, longitude: -73.97234),
    CLLocationCoordinate2D(latitude: 40.75680, longitude: -74.00442)
]

// Create a Polyline geometry and add it to the data source.
source.add(geometry: Polyline(points))

// Create a line layer and add it to the map.
let layer = LineLayer(source: source, options: [
    .strokeWidth(5),
    .strokeColor(.blue)
])
map.layers.addLayer(layer)

تعرض لقطة الشاشة التالية التعليمة البرمجية أعلاه التي تعرض سطرا في طبقة سطر.

A simple line displayed on the map in a line layer.

نمط الخط المستند إلى البيانات

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

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

// Create a line feature.
let feature = Feature(Polyline([
    CLLocationCoordinate2D(latitude: 47.704033, longitude: -122.131821),
    CLLocationCoordinate2D(latitude: 47.703678, longitude: -122.099919)
]))

// Add a property to the feature.
feature.addProperty("speedLimitMph", value: 35)

// Add the feature to the data source.
source.add(feature: feature)

// Create a second line feature.
let feature2 = Feature(Polyline([
    CLLocationCoordinate2D(latitude: 47.708265, longitude: -122.126662),
    CLLocationCoordinate2D(latitude: 47.703980, longitude: -122.126877)
]))

// Add a property to the second feature.
feature2.addProperty("speedLimitMph", value: 15)

// Add the second feature to the data source.
source.add(feature: feature2)

// Create a line layer and add it to the map.
let stops: [Int: UIColor] = [
    0: .green,
    30: .yellow,
    60: .red
]
let colorExpression = NSExpression(
    forAZMInterpolating: NSExpression(forKeyPath: "speedLimitMph"),
    curveType: .linear,
    parameters: nil,
    stops: NSExpression(forConstantValue: stops)
)

let layer = LineLayer(source: source, options: [
    .strokeWidth(5),
    .strokeColor(from: colorExpression)
])

map.layers.insertLayer(layer, below: "labels")

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

Add a line layer to a map.

إضافة تدرج حد إلى خط

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

// Create a data source and add it to the map.
let source = DataSource(options: [
    // Enable line metrics on the data source. This is needed to enable support for strokeGradient.
    .lineMetrics(true)
])
map.sources.add(source)

// Create a line and add it to the data source.
source.add(geometry: Polyline([
    CLLocationCoordinate2D(latitude: 47.63208, longitude: -122.18822),
    CLLocationCoordinate2D(latitude: 47.63196, longitude: -122.18204),
    CLLocationCoordinate2D(latitude: 47.62976, longitude: -122.17243),
    CLLocationCoordinate2D(latitude: 47.63023, longitude: -122.16419),
    CLLocationCoordinate2D(latitude: 47.62942, longitude: -122.15852),
    CLLocationCoordinate2D(latitude: 47.62988, longitude: -122.15183),
    CLLocationCoordinate2D(latitude: 47.63451, longitude: -122.14256),
    CLLocationCoordinate2D(latitude: 47.64041, longitude: -122.13483),
    CLLocationCoordinate2D(latitude: 47.64422, longitude: -122.13466),
    CLLocationCoordinate2D(latitude: 47.65440, longitude: -122.13844),
    CLLocationCoordinate2D(latitude: 47.66515, longitude: -122.13277),
    CLLocationCoordinate2D(latitude: 47.66712, longitude: -122.12779),
    CLLocationCoordinate2D(latitude: 47.66712, longitude: -122.11595),
    CLLocationCoordinate2D(latitude: 47.66735, longitude: -122.11063),
    CLLocationCoordinate2D(latitude: 47.67035, longitude: -122.10668),
    CLLocationCoordinate2D(latitude: 47.67498, longitude: -122.10565)
]))

// Create a line layer and add it to the map.
let stops: [Double: UIColor] = [
    0: .blue,
    0.1: UIColor(red: 0.25, green: 0.41, blue: 1, alpha: 1), // Royal Blue
    0.3: .cyan,
    0.5: UIColor(red: 0, green: 1, blue: 0, alpha: 1), // Lime
    0.7: .yellow,
    1: .red
]
let colorExpression = NSExpression(
    forAZMInterpolating: NSExpression.lineProgressAZMVariable,
    curveType: .linear,
    parameters: nil,
    stops: NSExpression(forConstantValue: stops)
)

map.layers.addLayer(LineLayer(source: source, options: [
    .strokeWidth(5),
    .strokeGradient(from: colorExpression)
]))

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

Add a gradient line layer to a map.

إضافة رموز على طول خط

يوضح هذا النموذج كيفية إضافة أيقونات الأسهم على طول خط على الخريطة. عند استخدام طبقة رمز، اضبط الخيار على symbolPlacement.line. سيؤدي هذا الخيار إلى عرض الرموز على طول الخط وتدوير الرموز (0 درجة = يمين).

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

// Load a image of an arrow into the map image sprite and call it "arrow-icon".
map.images.add(UIImage(named: "purple-arrow-right")!, withID: "arrow-icon")

// Create a line and add it to the data source.
source.add(geometry: Polyline([
    CLLocationCoordinate2D(latitude: 47.63208, longitude: -122.18822),
    CLLocationCoordinate2D(latitude: 47.63196, longitude: -122.18204),
    CLLocationCoordinate2D(latitude: 47.62976, longitude: -122.17243),
    CLLocationCoordinate2D(latitude: 47.63023, longitude: -122.16419),
    CLLocationCoordinate2D(latitude: 47.62942, longitude: -122.15852),
    CLLocationCoordinate2D(latitude: 47.62988, longitude: -122.15183),
    CLLocationCoordinate2D(latitude: 47.63451, longitude: -122.14256),
    CLLocationCoordinate2D(latitude: 47.64041, longitude: -122.13483),
    CLLocationCoordinate2D(latitude: 47.64422, longitude: -122.13466),
    CLLocationCoordinate2D(latitude: 47.65440, longitude: -122.13844),
    CLLocationCoordinate2D(latitude: 47.66515, longitude: -122.13277),
    CLLocationCoordinate2D(latitude: 47.66712, longitude: -122.12779),
    CLLocationCoordinate2D(latitude: 47.66712, longitude: -122.11595),
    CLLocationCoordinate2D(latitude: 47.66735, longitude: -122.11063),
    CLLocationCoordinate2D(latitude: 47.67035, longitude: -122.10668),
    CLLocationCoordinate2D(latitude: 47.67498, longitude: -122.10565)
]))

// Create a line layer and add it to the map.
map.layers.addLayer(LineLayer(source: source, options: [
    .strokeWidth(5),
    .strokeColor(.purple)
]))

// Create a symbol layer and add it to the map.
map.layers.addLayer(SymbolLayer(source: source, options: [
    // Space symbols out along line.
    .symbolPlacement(.line),

    // Spread the symbols out 100 points apart.
    .symbolSpacing(100),

    // Use the arrow icon as the symbol.
    .iconImage("arrow-icon"),

    // Allow icons to overlap so that they aren't hidden if they collide with other map elements.
    .iconAllowOverlap(true),

    // Center the symbol icon.
    .iconAnchor(.center),

    // Scale the icon size.
    .iconSize(0.8)
]))

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

purple_arrow_right
purple-arrow-right.png

تعرض لقطة الشاشة أدناه الرمز أعلاه الذي يعرض سطرا به رموز أسهم معروضة على طوله.

A line with purple arrow icons displayed along it pointing to the right.

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

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