Megosztás a következőn keresztül:


Szimbólumréteg hozzáadása az iOS SDK-ban (előzetes verzió)

Ez a cikk bemutatja, hogyan jeleníthet meg pontadatokat egy adatforrásból szimbólumrétegként egy térképen az Azure Térképek iOS SDK használatával. A szimbólumrétegek képként és szövegként jelenítik meg a pontokat a térképen.

Feljegyzés

Azure Térképek iOS SDK kivonása

Az iOS-hez készült Azure Térképek Natív SDK elavult, és 25.31-én megszűnik. A szolgáltatáskimaradások elkerülése érdekében 25.31-ig migráljon az Azure Térképek Web SDK-ba. További információ: Az Azure Térképek iOS SDK migrálási útmutatója.

Tipp.

A szimbólumrétegek alapértelmezés szerint az adatforrás összes geometriája koordinátáit jelenítik meg. Ha úgy szeretné korlátozni a réteget, hogy csak pontgeometriai jellemzőket jelenítsen meg, állítsa a filter réteg beállítását a következőre NSPredicate(format: "%@ == \"Point\"", NSExpression.geometryTypeAZMVariable): . Ha MultiPoint-funkciókat is szeretne használni, használja a .NSCompoundPredicate

Előfeltételek

Mindenképpen végezze el a rövid útmutató lépéseit: iOS-alkalmazásdokumentum létrehozása. A cikkben szereplő kódblokkok beszúrhatók a viewDidLoad következő függvénybe ViewController: .

Szimbólumréteg hozzáadása

Mielőtt hozzáadhat egy szimbólumréteget a térképhez, meg kell tennie néhány lépést. Először hozzon létre egy adatforrást, és adja hozzá a térképhez. Hozzon létre egy szimbólumréteget. Ezután adja át az adatforrást a szimbólumrétegnek, hogy lekérje az adatokat az adatforrásból. Végül adjon hozzá adatokat az adatforráshoz, hogy legyen valami megjelenítendő.

Az alábbi kód bemutatja, hogy mit kell hozzáadni a térképhez a betöltés után. Ez a minta egyetlen pontot jelenít meg a térképen egy szimbólumréteg használatával.

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

//Create a point and add it to the data source.
source.add(geometry: Point(CLLocationCoordinate2D(latitude: 0, longitude: 0)))

//Create a symbol layer to render icons and/or text at points on the map.
let layer = SymbolLayer(source: source)

//Add the layer to the map.
map.layers.addLayer(layer)

A térképhez három különböző típusú pontadat adható hozzá:

  • GeoJSON pontgeometria – Ez az objektum csak egy pont koordinátáját tartalmazza, és semmi mást. Az Point init metódussal egyszerűen létrehozhatja ezeket az objektumokat.
  • GeoJSON MultiPoint-geometria – Ez az objektum több pont koordinátáit tartalmazza, és semmi mást. Az objektumok létrehozásához adjon át egy koordinátatömböt az PointCollection osztálynak.
  • GeoJSON-funkció – Ez az objektum minden GeoJSON-geometriából és a geometriához társított metaadatokat tartalmazó tulajdonságok készletéből áll.

További információ: Adatforrás létrehozása a térképen adatok létrehozásáról és hozzáadásáról.

Az alábbi kódminta létrehoz egy GeoJSON-pont geometriát, és átadja azt a GeoJSON szolgáltatásnak, és hozzáadott értékkel rendelkezik title a tulajdonságaihoz. A title tulajdonság szövegként jelenik meg a térkép szimbólum ikonja alatt.

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

// Create a point feature.
let feature = Feature(Point(CLLocationCoordinate2D(latitude: 0, longitude: 0)))

// Add a property to the feature.
feature.addProperty("title", value: "Hello World!")

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

// Create a symbol layer to render icons and/or text at points on the map.
let layer = SymbolLayer(
    source: source,
    options: [
        // Get the title property of the feature and display it on the map.
        .textField(from: NSExpression(forKeyPath: "title")),

        // Place the text below so it doesn't overlap the icon.
        .textAnchor(.top)
    ]
)

// Add the layer to the map.
map.layers.addLayer(layer)

Az alábbi képernyőképen látható, hogy a fenti kód egy pontfunkciót jelenít meg egy ikonnal és egy szimbólumréteggel ellátott szövegfelirattal.

Képernyőkép a térképhez hozzáadott nagyítási vezérlőről.

Tipp.

Alapértelmezés szerint a szimbólumrétegek az átfedésben lévő szimbólumok elrejtésével optimalizálják a szimbólumok megjelenítését. A nagyítás során a rejtett szimbólumok láthatóvá válnak. Ha le szeretné tiltani ezt a funkciót, és az összes szimbólumot mindig megjeleníteni szeretné, állítsa be a beállításokat és textAllowOverlap a iconAllowOverlap beállításokattrue.

Egyéni ikon hozzáadása szimbólumréteghez

A szimbólumrétegek az OpenGL használatával jelennek meg. Ezért minden erőforrást, például ikonképet be kell tölteni az OpenGL-környezetbe. Ez a minta bemutatja, hogyan adhat hozzá egyéni ikont a térképerőforrásokhoz. Ez az ikon ezután egy egyéni szimbólummal jeleníti meg a pontadatokat a térképen. A textField szimbólumréteg tulajdonságához meg kell adni egy kifejezést. Ebben az esetben a hőmérséklet tulajdonságot szeretnénk megjeleníteni. Emellett hozzá szeretnénk fűzni "°F" . Az összefűzéshez egy kifejezés használható:

NSExpression(
    forAZMFunctionJoin: [
        NSExpression(forKeyPath: "temperature"),
        NSExpression(forConstantValue: "°F")
    ]
)
// Load a custom icon image into the image sprite of the map.
map.images.add(UIImage(named: "showers")!, withID: "my-custom-icon")

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

// Create a point feature.
let feature = Feature(Point(CLLocationCoordinate2D(latitude: 40.75773, longitude: -73.985708)))

// Add a property to the feature.
feature.addProperty("temperature", value: 64)

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

// Create a symbol layer to render icons and/or text at points on the map.
let layer = SymbolLayer(
    source: source,
    options: [
        .iconImage("my-custom-icon"),
        .iconSize(0.5),
        // Get the title property of the feature and display it on the map.
        .textField(
            from: NSExpression(
                forAZMFunctionJoin: [
                    NSExpression(forKeyPath: "temperature"),
                    NSExpression(forConstantValue: "°F")
                ]
            )
        ),
        .textOffset(CGVector(dx: 0, dy: -1.5))
    ]
)

// Add the layer to the map.
map.layers.addLayer(layer)

Ebben a mintában a következő kép lesz betöltve az alkalmazás eszközmappájába.

Képernyőkép az esőzáporokat ábrázoló Időjárás ikonról.
showers.png

Az alábbi képernyőképen látható, hogy a fenti kód egy pontfunkciót jelenít meg egyéni ikonnal és formázott szövegfelirattal egy szimbólumréteggel.

Képernyőkép egy térképről, amelyen a pontok renderelve láthatók, egy szimbólumréteg használatával, amely egy egyéni ikont és egy formázott szövegfeliratot jelenít meg egy pontfunkcióhoz.

Tipp.

Ha csak szimbólumréteggel rendelkező szöveget szeretne megjeleníteni, elrejtheti az ikont az iconImage ikonbeállítások niltulajdonságának beállításával.

Előre definiált szimbólumjelölő ikonok

A térkép kezdetben beépített alapértelmezett jelölőikonnal rendelkezik, amely már be van töltve a térkép kép sprite-jába. Alapértelmezés szerint akkor használatos, ha nincs beállítva a iconImage beállítás. Ha manuálisan kell elvégeznie, állítsa be "marker-default" a iconImage beállítást.

let layer = SymbolLayer(source: source, options: [.iconImage("marker-default")])

Emellett az Azure Térképek iOS SDK előre definiált színváltozatokkal rendelkezik az alapértelmezett (sötétkék) jelölő ikonhoz. A jelölőikonok eléréséhez használja az osztály statikus változóit UIImage , például: UIImage.azm_markerRed.

Ha nem alapértelmezett előre definiált jelölőképet szeretne használni, vegye fel a térkép kép sprite-jára.

// Load a non-default predefined icon into the image sprite of the map.
map.images.add(.azm_markerRed, withID: "marker-red")

// Create a symbol layer to render icons and/or text at points on the map.
let layer = SymbolLayer(source: source, options: [.iconImage("marker-red")])

Az alábbi kód az osztály statikus változóiként elérhető beépített ikonképeket sorolja fel UIImage .

UIImage.azm_markerDefault // Dark blue
UIImage.azm_markerBlack
UIImage.azm_markerBlue
UIImage.azm_markerRed
UIImage.azm_markerYellow

További információk

További kódmintákat a térképekhez a következő cikkekben talál: