Een heatmaplaag toevoegen (Android SDK)

Een heatmap, heel soms ook wel een puntdichtheidskaart genoemd, is een type gegevensvisualisatie. Ze worden gebruikt om de dichtheid van gegevens aan te geven met behulp van een bereik van kleuren en de gegevens 'hotspots' op een kaart weer te geven. Heatmaps zijn een uitstekende manier om gegevenssets met een groot aantal punten weer te geven.

Het weergeven van tienduizenden punten als symbolen kan het grootste deel van het kaartgebied omvatten. Dit geval resulteert waarschijnlijk in veel overlappende symbolen. Het wordt lastig om een beter inzicht te krijgen in de gegevens. Door dezelfde gegevensset als een heatmap te visualiseren, kunt u echter eenvoudig de dichtheid en de relatieve dichtheid van elk gegevenspunt zien.

U kunt heatmaps in veel verschillende scenario's gebruiken, waaronder:

• Temperatuurgegevens: biedt benaderingen voor wat de temperatuur is tussen twee gegevenspunten.
• Gegevens voor ruissensoren: toont niet alleen de intensiteit van de ruis waar de sensor zich is, maar kan ook inzicht geven in de afsipting over een afstand. Het niveau van ruis op één site is mogelijk niet hoog. Als het gebied voor de dekking van ruis van meerdere sensoren overlapt, is het mogelijk dat dit overlappende gebied hogere niveaus van ruis ervaart. Als zodanig zou het overlappende gebied zichtbaar zijn in de heatmap.
• GPS-trace: bevat de snelheid als een kaart met gewogen hoogte, waarbij de intensiteit van elk gegevenspunt is gebaseerd op de snelheid. Deze functionaliteit biedt bijvoorbeeld een manier om te zien waar een voertuig te snel was.

Vereisten

Zorg ervoor dat u de stappen in het document Quickstart: Een Android-app maken voltooit. Codeblokken in dit artikel kunnen worden ingevoegd in de onReady gebeurtenis-handler voor kaarten.

Een heatmap-laag toevoegen

Als u een gegevensbron van punten wilt weergeven als een heatmap, geeft u uw gegevensbron door aan een exemplaar van de klasse en voegt HeatMapLayer u deze toe aan de kaart.

Het volgende codevoorbeeld laadt een GeoJSON-feed met aardbevingen van de afgelopen week en geeft deze weer als een heatmap. Elk gegevenspunt wordt weergegeven met een radius van 10 pixels op alle zoomniveaus. Voor een betere gebruikerservaring staat de heatmap onder de labellaag, zodat de labels duidelijk zichtbaar blijven. De gegevens in dit voorbeeld zijn afkomstig van het USGS-programma voor aardbevingen. In dit voorbeeld worden GeoJSON-gegevens van internet geladen met behulp van het codeblok van het hulpprogramma voor gegevensimport dat is opgegeven in het document Een gegevensbron maken.

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

//Import the geojson data and add it to the data source.
source.importDataFromUrl("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson");

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

//Create a heat map layer.
HeatMapLayer layer = new HeatMapLayer(source,
  heatmapRadius(10f),
  heatmapOpacity(0.8f)
);

//Add the layer to the map, below the labels.
map.layers.add(layer, "labels");

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

//Import the geojson data and add it to the data source.
source.importDataFromUrl("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson")

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

//Create a heat map layer.
val layer = HeatMapLayer(
    source,
    heatmapRadius(10f),
    heatmapOpacity(0.8f)
)

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

In de volgende schermopname ziet u een kaart waarop een heatmap wordt geladen met behulp van de bovenstaande code.

De heatmaplaag aanpassen

In het vorige voorbeeld is de heatmap aangepast door de radius- en ondoorzichtigheidsopties in te stellen. De heatmaplaag biedt verschillende aanpassingsopties, waaronder:

• heatmapRadius: Definieert een pixel radius waarin elk gegevenspunt wordt weergegeven. U kunt de radius instellen als een vast getal of als een expressie. Met behulp van een expressie kunt u de radius schalen op basis van het zoomniveau en een consistent ruimtegebied op de kaart weergeven (bijvoorbeeld een radius van 5 mijl).

• heatmapColor: Hiermee geeft u op hoe de heatmap wordt kleuren. Een kleurovergang is een veelvoorkomende functie van heatmaps. U kunt het effect bereiken met een interpolate expressie. U kunt ook een expressie gebruiken voor het kleuren van de heatmap, door de dichtheid visueel op te breken in reeksen die lijken op een kaart in de vorm van een contour of step radar. Deze kleurenpalet definiëren de kleuren van het minimum tot de maximale dichtheidswaarde.

  U geeft kleurwaarden voor heatmaps op als een expressie voor de heatmapDensity waarde. De kleur van het gebied waar er geen gegevens zijn, wordt gedefinieerd op index 0 van de interpolatie-expressie, of de standaardkleur van een expressie 'Getrapt'. U kunt deze waarde gebruiken om een achtergrondkleur te definiëren. Deze waarde is vaak ingesteld op transparant of semi-transparant zwart.

  Hier zijn voorbeelden van kleurexpressie:

  Interpolatiekleurexpressie	Expressie met getrapte kleur
  interpoleren(     linear(),     heatmapDensity(),     stop(0, color(Color.TRANSPARENT)),     stop(0.01, color(Color.MAGENTA)),     stop(0.5, color(parseColor("#fb00fb"))),     stop(1, color(parseColor("#00c3ff"))) )`	step(     heatmapDensity(),     color(Color.TRANSPARENT),     stop(0.01, color(parseColor("#000080"))),     stop(0.25, color(parseColor("#000080"))),     stop(0.5, color(Color.GREEN)),     stop(0.5, color(Color.YELLOW)),     stop(1, color(Color.RED)) )

• heatmapOpacity: Hiermee geeft u op hoe ondoorzichtig of transparant de heatmaplaag is.

• heatmapIntensity: Hiermee wordt een vermenigvuldigingscoëfficiënt toegepast op het gewicht van elk gegevenspunt om de algehele intensiteit van de heatmap te verhogen. Het zorgt voor een verschil in het gewicht van gegevenspunten, waardoor het eenvoudiger te visualiseren is.

• heatmapWeight: Standaard hebben alle gegevenspunten een gewicht van 1 en worden ze gelijkmatig gewogen. De optie gewicht fungeert als een vermenigvuldiger en u kunt deze instellen als een getal of een expressie. Als een getal is ingesteld als het gewicht, is dit de equivalentie van het tweemaal plaatsen van elk gegevenspunt op de kaart. Als het gewicht bijvoorbeeld 2 is, wordt de dichtheid verdubbeld. Als u de gewichtsoptie instelt op een getal, wordt de heatmap op een vergelijkbare manier weergegeven als wanneer de intensiteitsoptie wordt gebruikt.

  Als u echter een expressie gebruikt, kan het gewicht van elk gegevenspunt worden gebaseerd op de eigenschappen van elk gegevenspunt. Stel bijvoorbeeld dat elk gegevenspunt een aardbeving vertegenwoordigt. De magnitudewaarde is een belangrijk metrisch gegeven voor elk gegevenspunt voor aardbevingen. Aardbevingen doen zich altijd voor, maar de meeste hebben een lage magnitude en worden niet opgemerkt. Gebruik de magnitudewaarde in een expressie om het gewicht toe te wijzen aan elk gegevenspunt. Door de magnitudewaarde te gebruiken om het gewicht toe te wijzen, krijgt u een betere weergave van het belang van aardbevingen in de heatmap.

• minZoom en maxZoom : het bereik op zoomniveau waar de laag moet worden weergegeven.

• filter: Een filterexpressie die wordt gebruikt voor het beperken van de die is opgehaald uit de bron en wordt weergegeven in de laag.

• sourceLayer: Als de gegevensbron die is verbonden met de laag een vectortegelbron is, moet een bronlaag binnen de vectortegels worden opgegeven.

• visible: de laag wordt verborgen of weergeven.

Hier volgt een voorbeeld van een heatmap waarbij een interpolatie-expressie voor interpolatie wordt gebruikt om een vloeiend kleurovergang te maken. De mag eigenschap die in de gegevens is gedefinieerd, wordt gebruikt met een exponentiële interpolatie om het gewicht of de relevantie van elk gegevenspunt in te stellen.

HeatMapLayer layer = new HeatMapLayer(source,
    heatmapRadius(10f),

    //A linear interpolation is used to create a smooth color gradient based on the heat map density.
    heatmapColor(
        interpolate(
            linear(),
            heatmapDensity(),
            stop(0, color(Color.TRANSPARENT)),
            stop(0.01, color(Color.BLACK)),
            stop(0.25, color(Color.MAGENTA)),
            stop(0.5, color(Color.RED)),
            stop(0.75, color(Color.YELLOW)),
            stop(1, color(Color.WHITE))
        )
    ),

    //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
    heatmapWeight(
       interpolate(
            exponential(2),
            get("mag"),
            stop(0,0),

            //Any earthquake above a magnitude of 6 will have a weight of 1
            stop(6, 1)
       )
    )
);

val layer = HeatMapLayer(source,
    heatmapRadius(10f),

    //A linear interpolation is used to create a smooth color gradient based on the heat map density.
    heatmapColor(
        interpolate(
            linear(),
            heatmapDensity(),
            stop(0, color(Color.TRANSPARENT)),
            stop(0.01, color(Color.BLACK)),
            stop(0.25, color(Color.MAGENTA)),
            stop(0.5, color(Color.RED)),
            stop(0.75, color(Color.YELLOW)),
            stop(1, color(Color.WHITE))
        )
    ),

    //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
    heatmapWeight(
       interpolate(
            exponential(2),
            get("mag"),
            stop(0,0),

            //Any earthquake above a magnitude of 6 will have a weight of 1
            stop(6, 1)
       )
    )
)

In de volgende schermopname ziet u de bovenstaande aangepaste heatmaplaag met dezelfde gegevens uit het vorige heatmapvoorbeeld.

Consistente inzoombare heatmap

Standaard hebben de radii van gegevenspunten die worden weergegeven in de heatmaplaag een vaste pixel radius voor alle zoomniveaus. Wanneer u op de kaart inzoomt, worden de gegevens samengevoegd en ziet de heatmaplaag er anders uit. In de volgende video ziet u het standaardgedrag van de heatmap, waarbij een pixel radius wordt bijhoudt bij het inzoomen op de kaart.

Gebruik een expressie om de radius voor elk zoomniveau te schalen, zodat elk gegevenspunt hetzelfde fysieke zoom gebied van de kaart beslaat. Met deze expressie ziet de heatmaplaag er statischer en consistenter uit. Elk zoomniveau van de kaart heeft twee keer zoveel pixels verticaal en horizontaal als het vorige zoomniveau.

Als u de radius zo schaalt dat deze met elk zoomniveau wordt verdubbeld, wordt er een heatmap gemaakt die consistent is op alle zoomniveaus. Als u deze schaalbaarheid wilt toepassen, gebruikt u met een base 2-expressie, met de pixel radius ingesteld voor het minimale zoomniveau en een geschaalde radius voor het maximale zoomniveau dat is berekend, zoals wordt weergegeven in het volgende zoom exponential interpolation 2 * Math.pow(2, minZoom - maxZoom) voorbeeld. Zoom op de kaart in om te zien hoe de heatmap wordt geschaald met het zoomniveau.

HeatMapLayer layer = new HeatMapLayer(source,
  heatmapRadius(
    interpolate(
      exponential(2),
      zoom(),

      //For zoom level 1 set the radius to 2 pixels.
      stop(1, 2f),

      //Between zoom level 1 and 19, exponentially scale the radius from 2 pixels to 2 * (maxZoom - minZoom)^2 pixels.
      stop(19, Math.pow(2, 19 - 1) * 2f)
    )
  ),
  heatmapOpacity(0.75f)
);

val layer = HeatMapLayer(source,
  heatmapRadius(
    interpolate(
      exponential(2),
      zoom(),

      //For zoom level 1 set the radius to 2 pixels.
      stop(1, 2f),

      //Between zoom level 1 and 19, exponentially scale the radius from 2 pixels to 2 * (maxZoom - minZoom)^2 pixels.
      stop(19, Math.pow(2.0, 19 - 1.0) * 2f)
    )
  ),
  heatmapOpacity(0.75f)
)

In de volgende video ziet u een kaart waarop de bovenstaande code wordt uitgevoerd, waarmee de radius wordt geschaald terwijl de kaart wordt ingezoomd om een consistente weergave van heatmaps over zoomniveaus te maken.

De zoom expressie kan alleen worden gebruikt in - en step interpolate -expressies. De volgende expressie kan worden gebruikt om een radius in meters te schatten. Deze expressie maakt gebruik van een tijdelijke radiusMeters aanduiding die u moet vervangen door de gewenste radius. Deze expressie berekent de radius van de pixel bij benadering voor een zoomniveau op de evenaar voor zoomniveaus 0 en 24 en gebruikt een expressie om tussen deze waarden te schalen op dezelfde manier als het tegelsysteem op de exponential interpolation kaart.

interpolate(
    exponential(2),
    zoom(),
    stop(1, product(radiusMeters, 0.000012776039596366526)),
    stop(24, product(radiusMeters, 214.34637593279402))
)

HeatMapLayer layer = new HeatMapLayer(dataSource,
   heatmapWeight(get("point_count"))
);

interpolate(
    exponential(2),
    zoom(),
    stop(1, product(radiusMeters, 0.000012776039596366526)),
    stop(24, product(radiusMeters, 214.34637593279402))
)

var layer = new HeatMapLayer(dataSource,
   heatmapWeight(get("point_count"))
)

Volgende stappen

Zie de volgende artikelen voor meer codevoorbeelden die u aan uw kaarten kunt toevoegen: