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

Värmekartor, som även kallas punktdensitetskartor, är en typ av datavisualisering. De används för att representera densiteten för data med hjälp av olika färger och visa data "hot spots" på en karta. Värmekartor är ett bra sätt att återge datamängder med ett stort antal punkter.

Återgivning av tiotusentals punkter som symboler kan täcka de flesta av kartområdet. Det här fallet resulterar troligen i att många symboler överlappar varandra. Gör det svårt att få en bättre förståelse av data. Men genom att visualisera samma datamängd som en heat map är det enkelt att se densiteten och den relativa densiteten för varje datapunkt.

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

• Temperaturdata: Ger approximeringar av vad temperaturen är mellan två datapunkter.
• Data för brussensorer: Visar inte bara brusintensiteten där sensorn är, utan kan även ge insikter om avledning över ett avstånd. Brusnivån på en och samma plats kanske inte är hög. Om brustäckningsområdet från flera sensorer överlappar ä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å den 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 är till exempel ett sätt att se var ett fordon kördes.

Lägga till ett heatmapskikt

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

I följande kod har varje värmepunkt en radie på 10 bildpunkter på alla zoomningsnivåer. För att säkerställa en bättre användarupplevelse finns den värmekartan under etikettskiktet. Etiketterna förblir tydligt synliga. Data i det här exemplet kommer från USGS Jordbävningsriskprogram. 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');

Här är det fullständiga kodexempel som körs för föregående kod.

Anpassa det heat map-skiktet

I föregående exempel anpassades den värmekartan genom att ange alternativen för radie och opacitet. Det värmekartskiktet innehåller flera anpassningsalternativ, bland annat:

• radius: Definierar en pixelradie där varje datapunkt ska återges. Du kan ange radien som ett fast tal eller som ett uttryck. Med hjälp av 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 km).

• color: Anger hur den värmekartan färgiseras. En färgtoning är en vanlig funktion i värmekartor. Du kan uppnå effekten med ett interpolate uttryck. Du kan också använda ett uttryck för att färglägga den värmekartan, och dela upp densiteten visuellt i intervall som liknar en karta step av klassiskt eller radarformat. Dessa färgpaletter definierar färgerna från lägsta till högsta densitet.

  Du anger färgvärden för värmekartor som ett uttryck för heatmap-density värdet. Färgen på området där det inte finns några data definieras vid index 0 i uttrycket "Interpolation", eller standardfärgen för ett "Stegvist"-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 delvis transparent svart.

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

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

• opacity: Anger hur täckande eller transparent det heat map-skiktet är.

• intensity: Tillämpar en multiplikator på vikten för varje datapunkt för att öka den övergripande intensiteten av den heatmap. Det orsakar en skillnad i vikten av datapunkter, vilket gör det enklare 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 likvärdigt 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 den värmekartan på ett liknande sätt som med hjälp av alternativet intensitet.

  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 sker hela tiden, men de flesta har en låg omfattning 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 den värmekartan.

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

Här är ett verktyg för att testa de olika alternativen för det heat map-lagret.

Konsekvent zoombar värmekarta

Som standard har radi av datapunkter som återges i det heat map-skiktet en fast pixelradie för alla zoomningsnivåer. När du zoomar kartan aggregeras data och det heat map-lagret ser annorlunda ut.

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

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

Uttrycket zoom kan bara användas i step uttrycken och interpolate . Följande uttryck kan användas för att göra en ungefärlig radie i meter. Det här uttrycket använder en radiusMeters platshållare som du bör ersätta med önskad radie. Det här uttrycket beräknar den ungefärliga pixelradien för en zoomningsnivå på ekvatorn för zoomningsnivå 0 och 24, och använder ett uttryck för att skala mellan dessa värden på samma sätt som exponential interpolation tilingsystemet på kartan fungerar.

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

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

Nästa steg

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

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