Dela via

Lägga till ett lager för värmekarta till en karta

  • Artikel

Värmekartor, även kallade punktdensitetskartor, är en typ av datavisualisering. De används för att representera datadensiteten med hjälp av en rad färger och visa data "hot spots" på en karta. Värmekartor är ett bra sätt att återge datauppsättningar med ett stort antal punkter.

Att återge tiotusentals punkter som symboler kan täcka större delen av kartområdet. Det här fallet resulterar sannolikt i att många symboler överlappar varandra. Gör det svårt att få en bättre förståelse för data. Att visualisera samma datauppsättning som en värmekarta gör det dock enkelt att se densiteten och den relativa densiteten för varje datapunkt.

Du kan använda värmekartor i många olika scenarier, bland annat:

  • Temperaturdata: Ger approximationer för vad temperaturen är mellan två datapunkter.
  • Data för brussensorer: Visar inte bara intensiteten i bruset där sensorn är, utan kan också ge insikt i avledningen över ett avstånd. Brusnivån på en plats kanske inte är hög. Om brustäckningsområdet från flera sensorer överlappar varandra är det möjligt att det här överlappande området kan uppleva högre brusnivåer. Därför skulle det överlappande området vara synligt på värmekartan.
  • GPS-spårning: Innehåller hastigheten som en viktad höjdkarta, där intensiteten för varje datapunkt baseras på hastigheten. Den här funktionen ger till exempel ett sätt att se var ett fordon körde för fort.

Dricks

Som standard återges koordinaterna för alla geometrier i en datakälla. Om du vill begränsa lagret så att det bara återger punktgeometrifunktioner ställer du in filter egenskapen för lagret på ['==', ['geometry-type'], 'Point']. Om du även vill inkludera MultiPoint-funktioner anger du filter egenskapen för lagret till ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']].


Lägga till ett heatmapskikt

Om du vill återge en datakälla med punkter som en värmekarta skickar du datakällan till en instans av HeatMapLayer klassen och lägger till den på kartan.

I följande kod har varje värmepunkt en radie på 10 bildpunkter på alla zoomnivåer. För att säkerställa en bättre användarupplevelse ligger värmekartan under etikettskiktet. Etiketterna förblir tydligt synliga. Data i det här exemplet kommer från USGS Earthquake Hazards Program. Det är för betydande jordbävningar som har inträffat under de senaste 30 dagarna.

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

//Load a dataset of points, in this case earthquake data from the USGS.
datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson');

//Create a heat map and add it to the map.
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
  radius: 10,
  opacity: 0.8
}), 'labels');

Exemplet Simple Heat Map Layer visar hur du skapar en enkel värmekarta från en datauppsättning med punktfunktioner. Källkoden för det här exemplet finns i Simple Heat Map Layer-källkoden.

Skärmbild som visar en karta som visar en värmekarta.

Anpassa värmekartlagret

I föregående exempel anpassades värmekartan genom att ange radie- och opacitetsalternativ. Termisk kartskiktet innehåller flera alternativ för anpassning, bland annat:

  • radius: Definierar en pixelradie där varje datapunkt ska återges. Du kan ange radien som ett fast tal eller som ett uttryck. Genom att använda ett uttryck kan du skala radien baserat på zoomningsnivån och representera ett konsekvent rumsligt område på kartan (till exempel en radie på 5 mil).

  • color: Anger hur värmekartan färgas. En färgtoning är en vanlig funktion i värmekartor. Du kan uppnå effekten med ett interpolate uttryck. Du kan också använda ett step uttryck för att färglägga värmekartan och dela upp densiteten visuellt i områden som liknar en kontur- eller radarkarta. Dessa färgpaletter definierar färgerna från lägsta till högsta densitetsvärde.

    Du anger färgvärden för värmekartor som ett uttryck för värdet heatmap-density . Färgen på området där det inte finns några data definieras vid index 0 för uttrycket "Interpolation" eller standardfärgen för ett "stegvis" uttryck. Du kan använda det här värdet för att definiera en bakgrundsfärg. Det här värdet är ofta inställt på transparent eller halvtransparent svart.

    Här är exempel på färguttryck:

    Färguttryck för interpolering Stegvis färguttryck
    [
        "interpolera",
        ['linjär'],
        ['heatmap-density'],
        0, "transparent",
        0.01, "lila",
        0.5, "#fb00fb",
        1, "#00c3ff"
    ]    		 [
        "step",
        ['heatmap-density'],
        "transparent",
        0.01, "navy",
        0,25, "grön",
        0,50, "gul",
        0,75, "röd"
    ]

  • opacity: Anger hur ogenomskinligt eller transparent värmekartlagret är.

  • intensity: Tillämpar en multiplikator på vikten för varje datapunkt för att öka den totala intensiteten i värmekartan. Det orsakar en skillnad i vikten av datapunkter, vilket gör det lättare att visualisera.

  • weight: Som standard har alla datapunkter en vikt på 1 och viktas lika. Viktalternativet fungerar som en multiplikator och du kan ange det som ett tal eller ett uttryck. Om ett tal anges som vikt är det motsvarigheten till att placera varje datapunkt på kartan två gånger. Om vikten till exempel är 2 fördubblas densiteten. Om du anger viktalternativet till ett tal återges värmekartan på ett liknande sätt som med hjälp av intensitetsalternativet.

    Men om du använder ett uttryck kan vikten för varje datapunkt baseras på egenskaperna för varje datapunkt. Anta till exempel att varje datapunkt representerar en jordbävning. Storleksvärdet har varit ett viktigt mått för varje jordbävningsdatapunkt. Jordbävningar inträffar hela tiden, men de flesta har en låg magnitud och märks inte. Använd storleksvärdet i ett uttryck för att tilldela vikten till varje datapunkt. Genom att använda storleksvärdet för att tilldela vikten får du en bättre representation av betydelsen av jordbävningar i värmekartan.

  • source och source-layer: Gör att du kan uppdatera datakällan.

Exemplet på alternativ för termisk karta visar hur de olika alternativen för det termiska kartskiktet som påverkar återgivningen. Källkoden för det här exemplet finns i källkoden för alternativ för termisk karta.

Skärmbild som visar en karta som visar en värmekarta och en panel med redigerbara inställningar som visar hur de olika alternativen för värmekartlagret påverkar återgivningen.

Konsekvent zoombar värmekarta

Som standard har radien av datapunkter som återges i värmekartans lager en fast pixelradie för alla zoomnivåer. När du zoomar kartan aggregeras data och värmekartlagret ser annorlunda ut.

Använd ett zoom uttryck för att skala radien för varje zoomnivå, så att varje datapunkt täcker samma fysiska område på kartan. Det här uttrycket gör att värmekartlagret ser mer statiskt och konsekvent ut. Varje zoomningsnivå på kartan har dubbelt så många bildpunkter lodrätt och vågrätt som föregående zoomnivå.

Om du skalar radien så att den dubblas med varje zoomnivå skapas en värmekarta som ser konsekvent ut på alla zoomnivåer. Om du vill använda den här skalningen använder zoom du med ett base 2-uttryck exponential interpolation , med pixelradien inställd för den minsta zoomnivån och en skalad radie för den maximala zoomnivå som beräknas enligt 2 * Math.pow(2, minZoom - maxZoom) följande exempel. Zooma kartan för att se hur värmekartan skalar med zoomnivån.

Exemplet på konsekvent zoombar värmekarta visar hur du skapar en värmekarta där radien för varje datapunkt täcker samma fysiska område på marken, vilket skapar en mer konsekvent användarupplevelse när du zoomar kartan. Värmekartan i det här exemplet skalar konsekvent mellan zoomnivåerna 10 och 22. Varje zoomningsnivå på kartan har dubbelt så många bildpunkter lodrätt och vågrätt som föregående zoomnivå. Om du fördubblar radien med varje zoomnivå skapas en värmekarta som ser konsekvent ut över alla zoomnivåer. Källkoden för det här exemplet finns i Konsekvent zoombar källkod för värmekarta.

Skärmbild som visar en karta som visar en värmekarta som använder ett zoomuttryck som skalar radien för varje zoomnivå.

Uttrycket zoom kan bara användas i step och interpolate uttryck. Följande uttryck kan användas för att approximeras en radie i meter. Det här uttrycket använder en platshållare radiusMeterssom du bör ersätta med önskad radie. Det här uttrycket beräknar den ungefärliga pixelradien för en zoomnivå vid ekvatorn för zoomningsnivåer 0 och 24 och använder ett exponential interpolation uttryck för att skala mellan dessa värden på samma sätt som plattsättningssystemet på kartan.

[
    'interpolate',
    ['exponential', 2],
    ['zoom'],
    0, ['*', radiusMeters, 0.000012776039596366526],
    24, ['*', radiusMeters, 214.34637593279402]
]

Dricks

När du aktiverar klustring på datakällan grupperas punkter som ligger nära varandra som en klustrad punkt. Du kan använda punktantalet för varje kluster som viktuttryck för värmekartan. Detta kan avsevärt minska antalet punkter som ska renderas. Punktantalet för ett kluster lagras i en point_count egenskap för punktfunktionen:

var layer = new atlas.layer.HeatMapLayer(datasource, null, {
   weight: ['get', 'point_count']
});

Om klustringsradien bara är några få bildpunkter skulle det finnas en liten visuell skillnad i återgivningen. En större radie grupperar fler punkter i varje kluster och förbättrar prestanda för värmekartan.

Nästa steg

Läs mer om de klasser och metoder som används i den här artikeln:

HeatMapLayer

HeatMapLayerOptions

Fler kodexempel att lägga till i dina kartor finns i följande artiklar:

Skapa en datakälla

Använda datadrivna formatuttryck