Dodawanie warstwy mapy cieplnej w zestawie SDK systemu iOS (wersja zapoznawcza)

Uwaga

Wycofanie zestawu AZURE Mapy iOS SDK

Zestaw Azure Mapy Native SDK dla systemu iOS jest teraz przestarzały i zostanie wycofany w dniu 3/31/25. Aby uniknąć przerw w działaniu usługi, przeprowadź migrację do zestawu Sdk sieci Web usługi Azure Mapy do 31/31/25. Aby uzyskać więcej informacji, zobacz Przewodnik migracji zestawu SDK platformy Azure Mapy iOS.

Mapy cieplne, nazywane również mapami gęstości punktów, są typem wizualizacji danych. Są one używane do reprezentowania gęstości danych przy użyciu różnych kolorów i pokazywania danych "gorących punktów" na mapie. Mapy cieplne to doskonały sposób renderowania zestawów danych z dużą liczbą punktów.

Renderowanie dziesiątek tysięcy punktów jako symboli może obejmować większość obszaru mapy. Ten przypadek prawdopodobnie powoduje nakładanie się wielu symboli. Utrudnianie lepszego zrozumienia danych. Jednak wizualizowanie tego samego zestawu danych co mapa cieplna ułatwia sprawdzenie gęstości i względnej gęstości każdego punktu danych.

Mapy cieplne można używać w wielu różnych scenariuszach, w tym:

• Dane dotyczące temperatury: zapewnia przybliżenia temperatury między dwoma punktami danych.
• Dane dotyczące czujników szumu: pokazuje nie tylko intensywność szumu, w którym znajduje się czujnik, ale może również zapewnić wgląd w rozproszenie na odległość. Poziom szumu w każdej lokacji może nie być wysoki. Jeśli obszar pokrycia szumu z wielu czujników nakłada się na siebie, możliwe, że ten nakładający się obszar może doświadczać wyższego poziomu szumu. W związku z tym nakładany obszar będzie widoczny na mapie cieplnej.
• Ślad GPS: zawiera szybkość jako mapę ważonej wysokości, gdzie intensywność każdego punktu danych jest oparta na szybkości. Na przykład ta funkcja umożliwia sprawdzenie, gdzie pojazd pędzył.

Napiwek

Warstwy mapy cieplnej domyślnie renderują współrzędne wszystkich geometrii w źródle danych. Aby ograniczyć warstwę tak, aby renderowana była tylko cechy geometrii punktów, ustaw filter opcję warstwy na NSPredicate(format: "%@ == \"Point\"", NSExpression.geometryTypeAZMVariable). Jeśli chcesz również uwzględnić funkcje MultiPoint, użyj polecenia NSCompoundPredicate.

Internet rzeczy Show — Mapy cieplne i nakładki obrazów na platformie Azure Mapy

Wymagania wstępne

Pamiętaj, aby wykonać kroki opisane w dokumencie Szybki start: tworzenie aplikacji systemu iOS. Bloki kodu w tym artykule można wstawić do viewDidLoad funkcji ViewController.

Dodawanie warstwy mapy cieplnej

Aby renderować źródło danych punktów jako mapę cieplną, przekaż źródło danych do wystąpienia HeatMapLayer klasy i dodaj je do mapy.

Poniższy przykładowy kod ładuje źródło danych GeoJSON trzęsień ziemi z ostatniego tygodnia i renderuje je jako mapę cieplną. Każdy punkt danych jest renderowany z promieniem 10 punktów na wszystkich poziomach powiększenia. Aby zapewnić lepsze środowisko użytkownika, mapa cieplna znajduje się poniżej warstwy etykiety, dzięki czemu etykiety pozostają wyraźnie widoczne. Dane w tym przykładzie pochodzą z USGS Earthquake Hazards Program.

// Create a data source.
let source = DataSource()

// Import the geojson data and add it to the data source.
let url = URL(string: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson")!
source.importData(fromURL: url)

// Add data source to the map.
map.sources.add(source)

// Create a heat map layer.
let layer = HeatMapLayer(
    source: source,
    options: [
        .heatmapRadius(10),
        .heatmapOpacity(0.8)
    ]
)

// Add the layer to the map, below the labels.
map.layers.insertLayer(layer, below: "labels")

Poniższy zrzut ekranu przedstawia mapę ładowania mapy cieplnej przy użyciu powyższego kodu.

Dostosowywanie warstwy mapy cieplnej

W poprzednim przykładzie dostosowano mapę cieplną, ustawiając opcje promienia i nieprzezroczystości. Warstwa mapy cieplnej oferuje kilka opcji dostosowywania, w tym:

• heatmapRadius: definiuje promień w punktach, w których ma być renderowany każdy punkt danych. Promień można ustawić jako stałą liczbę lub jako wyrażenie. Za pomocą wyrażenia można skalować promień na podstawie poziomu powiększenia i reprezentować spójny obszar przestrzenny na mapie (na przykład 5-milowy promień).

• heatmapColor: określa sposób kolorowania mapy cieplnej. Gradient kolorów jest wspólną cechą map cieplnych. Efekt można osiągnąć za pomocą NSExpression(forAZMInterpolating:curveType:parameters:stops:) wyrażenia. Możesz również użyć NSExpression(forAZMStepping:from:stops:) wyrażenia do kolorowania mapy cieplnej, dzieląc gęstość wizualnie na zakresy przypominające mapę konturu lub radaru. Te palety kolorów definiują kolory od minimum do maksymalnej wartości gęstości.

  Wartości kolorów map cieplnych można określić jako wyrażenie wartości NSExpression.heatmapDensityAZMVariable . Kolor obszaru, w którym nie ma danych, jest zdefiniowany na indeksie 0 wyrażenia "Interpolacja" lub domyślny kolor wyrażenia "Schodkowego". Tej wartości można użyć do zdefiniowania koloru tła. Często ta wartość jest ustawiona na przezroczystą lub półprzezroczystą czarną.

  Oto przykłady wyrażeń kolorów:

// Interpolated color expression
NSExpression(
    forAZMInterpolating: .heatmapDensityAZMVariable,
    curveType: .linear,
    parameters: nil,
    stops: NSExpression(forConstantValue: [
        0: UIColor.magenta.withAlphaComponent(0),
        0.01: UIColor.magenta,
        0.5: UIColor(red: 251/255, green: 0, blue: 251/255, alpha: 1),
        1: UIColor(red: 0, green: 195/255, blue: 1, alpha: 1)
    ])
)

// Stepped color expression
NSExpression(
    forAZMStepping: .heatmapDensityAZMVariable,
    from: NSExpression(forConstantValue: UIColor.clear),
    stops: NSExpression(forConstantValue: [
        0.01: UIColor(red: 0, green: 0, blue: 128/255, alpha: 1),
        0.25: UIColor.cyan,
        0.5: UIColor.green,
        0.75: UIColor.yellow,
        1: UIColor.red
    ])
)

• heatmapOpacity: określa, jak nieprzezroczysta lub przezroczysta jest warstwa mapy cieplnej.

• heatmapIntensity: Stosuje mnożnik do wagi każdego punktu danych, aby zwiększyć ogólną intensywność mapy cieplnej. Powoduje to różnicę w wadze punktów danych, co ułatwia wizualizowanie.

• heatmapWeight: Domyślnie wszystkie punkty danych mają wagę 1 i są ważone w równym stopniu. Opcja waga działa jako mnożnik i można ustawić ją jako liczbę lub wyrażenie. Jeśli liczba jest ustawiona jako waga, jest to równoważność umieszczania każdego punktu danych na mapie dwa razy. Jeśli na przykład waga to 2, gęstość podwoi się. Ustawienie opcji wagi na liczbę renderuje mapę cieplną w podobny sposób do użycia opcji intensywności.

  Jeśli jednak używasz wyrażenia, waga każdego punktu danych może być oparta na właściwościach każdego punktu danych. Załóżmy na przykład, że każdy punkt danych reprezentuje trzęsienie ziemi. Wartość wielkości była ważną metryą dla każdego punktu danych trzęsienia ziemi. Trzęsienia ziemi zdarzają się cały czas, ale większość ma niską wielkość i nie są zauważane. Użyj wartości wielkości w wyrażeniu, aby przypisać wagę do każdego punktu danych. Używając wartości wielkości do przypisania wagi, uzyskasz lepszą reprezentację znaczenia trzęsień ziemi w mapie cieplnej.

• minZoom i maxZoom: Zakres poziomów powiększenia, w którym powinna być wyświetlana warstwa.

• filter: predykat filtru używany do ograniczania pobranego ze źródła i renderowanego w warstwie.

• sourceLayer: Jeśli źródło danych połączone z warstwą jest źródłem kafelka wektorowego, należy określić warstwę źródłową w kafelkach wektorowych.

• visible: ukrywa lub wyświetla warstwę.

W poniższym przykładzie pokazano mapę cieplną przy użyciu wyrażenia interpolacji liniowej w celu utworzenia płynnego gradientu kolorów. Właściwość zdefiniowana mag w danych jest używana z interpolacją wykładniczą w celu ustawienia wagi lub istotności każdego punktu danych.

let layer = HeatMapLayer(source: source, options: [
    .heatmapRadius(10),

    // A linear interpolation is used to create a smooth color gradient based on the heat map density.
    .heatmapColor(
        from: NSExpression(
            forAZMInterpolating: .heatmapDensityAZMVariable,
            curveType: .linear,
            parameters: nil,
            stops: NSExpression(forConstantValue: [
                0: UIColor.black.withAlphaComponent(0),
                0.01: UIColor.black,
                0.25: UIColor.magenta,
                0.5: UIColor.red,
                0.75: UIColor.yellow,
                1: UIColor.white
            ])
        )
    ),

    // Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
    .heatmapWeight(
        from: NSExpression(
            forAZMInterpolating: NSExpression(forKeyPath: "mag"),
            curveType: .exponential,
            parameters: NSExpression(forConstantValue: 2),
            stops: NSExpression(forConstantValue: [
                0: 0,
                // Any earthquake above a magnitude of 6 will have a weight of 1
                6: 1
            ])
        )
    )
])

Poniższy zrzut ekranu przedstawia powyższą niestandardową warstwę mapy cieplnej przy użyciu tych samych danych z poprzedniego przykładu mapy cieplnej.

Spójna mapa cieplna z możliwością powiększania

Domyślnie promienie punktów danych renderowanych w warstwie mapy cieplnej mają stały promień punktu dla wszystkich poziomów powiększenia. Podczas powiększania mapy dane agregują się razem, a warstwa mapy cieplnej wygląda inaczej. Poniższy film wideo przedstawia domyślne zachowanie mapy cieplnej, w której utrzymuje promień punktu podczas powiększania mapy.

zoom Użyj wyrażenia, aby skalować promień dla każdego poziomu powiększenia, tak aby każdy punkt danych obejmował ten sam fizyczny obszar mapy. To wyrażenie sprawia, że warstwa mapy cieplnej wygląda bardziej statycznie i spójnie. Każdy poziom powiększenia mapy ma dwa razy więcej punktów w pionie i w poziomie, jak poprzedni poziom powiększenia.

Skalowanie promienia w taki sposób, aby podwoiło się z każdym poziomem powiększenia, tworzy mapę cieplną, która wygląda spójnie na wszystkich poziomach powiększenia. Aby zastosować to skalowanie, użyj NSExpression.zoomLevelAZMVariable wyrażenia podstawowego 2 exponential interpolation z promieniem punktu ustawionym dla minimalnego poziomu powiększenia i promieniem skalowanym dla maksymalnego poziomu powiększenia obliczonego zgodnie pow(2, maxZoom - minZoom) * radius z poniższym przykładem. Powiększ mapę, aby zobaczyć, jak mapa cieplna skaluje się z poziomem powiększenia.

let layer = HeatMapLayer(source: source, options: [
    .heatmapOpacity(0.75),
    .heatmapRadius(
        from: NSExpression(
            forAZMInterpolating: .zoomLevelAZMVariable,
            curveType: .exponential,
            parameters: NSExpression(forConstantValue: 2),
            stops: NSExpression(forConstantValue: [

                // For zoom level 1 set the radius to 2 points.
                1: 2,

                // Between zoom level 1 and 19, exponentially scale the radius from 2 points to 2 * 2^(maxZoom - minZoom) points.
                19: pow(2, 19 - 1) * 2
            ])
        )
    )
])

Poniższy film wideo przedstawia mapę uruchamianą powyżej kodu, która skaluje promień, gdy mapa jest powiększana, aby utworzyć spójne renderowanie mapy cieplnej na różnych poziomach powiększenia.

Napiwek

Po włączeniu klastrowania w źródle danych punkty, które znajdują się blisko siebie, są grupowane razem jako punkt klastrowany. Liczbę punktów każdego klastra można użyć jako wyrażenia wagi dla mapy cieplnej. Może to znacznie zmniejszyć liczbę punktów do renderowania. Liczba punktów klastra jest przechowywana we point_count właściwości funkcji punktu:

let layer = HeatMapLayer(source: source, options: [
    .heatmapWeight(from: NSExpression(forKeyPath: "point_count"))
])

Jeśli promień klastrowania wynosi tylko kilka punktów, istnieje niewielka różnica wizualna w renderowaniu. Większy promień grupuje więcej punktów w każdym klastrze i poprawia wydajność mapy cieplnej.

Dodatkowe informacje

Aby uzyskać więcej przykładów kodu do dodania do map, zobacz następujące artykuły:

• Tworzenie źródła danych
• Używanie wyrażeń stylu opartych na danych