Lägga till kontroller på en karta

Artikel
11/08/2024

Den här artikeln visar hur du lägger till kontroller på en karta, inklusive hur du skapar en karta med alla kontroller och en formatväljare.

Lägg till zoomkontroll

En zoomkontroll lägger till knappar för att zooma in och ut kartan. Följande kodexempel skapar en instans av klassen ZoomControl och lägger till den i det nedre högra hörnet på kartan.

//Construct a zoom control and add it to the map.
map.controls.add(new atlas.control.ZoomControl(), {
    position: 'bottom-right'
});

Lägg till tonhöjdskontroll

En tonhöjdskontroll lägger till knappar för att luta tonhöjden till kartan i förhållande till horisonten. Följande kodexempel skapar en instans av klassen PitchControl . Den lägger till PitchControl i det övre högra hörnet på kartan.

//Construct a pitch control and add it to the map.
map.controls.add(new atlas.control.PitchControl(), {
    position: 'top-right'
});

Lägg till kompasskontroll

En kompasskontroll lägger till en knapp för att rotera kartan. Följande kodexempel skapar en instans av klassen CompassControl och lägger till den i det nedre vänstra hörnet på kartan.

//Construct a compass control and add it to the map.
map.controls.add(new atlas.control.CompassControl(), {
    position: 'bottom-left'
});

Lägg till skalningskontroll

En skalningskontroll lägger till ett skalningsfält på kartan. Följande kodexempel skapar en instans av klassen ScaleControl och lägger till den i kartans nedre vänstra hörn.

//Construct a scale control and add it to the map.
map.controls.add(new atlas.control.ScaleControl(), {
    position: 'bottom-left'
});

Lägg till fullskärmskontroll

En helskärmskontroll lägger till en knapp för att växla kartan eller det angivna HTML-elementet mellan helskärmsläge och normal vy. Följande kodexempel skapar en instans av klassen FullscreenControl och lägger till den i det övre högra hörnet på kartan.

//Construct a fullscreen control and add it to the map.
map.controls.add(new atlas.control.FullscreenControl(), {
    position: 'top-right'
});

En karta med alla kontroller

Flera kontroller kan placeras i en matris och läggas till på kartan samtidigt och placeras i samma område på kartan för att förenkla utvecklingen. Följande kodfragment lägger till standardnavigeringskontrollerna på kartan med den här metoden.

map.controls.add(
  [
    new atlas.control.ZoomControl(),
    new atlas.control.PitchControl(),
    new atlas.control.CompassControl(),
    new atlas.control.StyleControl(),
    new atlas.control.FullscreenControl(),
    new atlas.control.ScaleControl(),
  ],
  {
    position: 'top-right',
  }
);

Följande bild visar en karta med kontrollerna zoom, tonhöjd, kompass, stil, helskärm och skalning i det övre högra hörnet på kartan. Lägg märke till hur de staplas automatiskt. Ordningen på kontrollobjekten i skriptet avgör i vilken ordning de visas på kartan. Om du vill ändra ordningen på kontrollerna på kartan kan du ändra deras ordning i matrisen.

Formatväljarkontrollen definieras av klassen StyleControl . Mer information om hur du använder formatväljarkontrollen finns i välja ett kartformat.

Anpassa kontroller

Exemplet alternativ för navigeringskontroll är ett verktyg för att testa de olika alternativen för att anpassa kontrollerna. Källkoden för det här exemplet finns i Källkod för alternativ för navigeringskontroll.

I exemplet med alternativ för helskärmskontroll finns ett verktyg för att testa alternativen för att anpassa fullskärmskontrollen. Källkoden för det här exemplet finns i Källkod för alternativ för helskärmskontroll.

Om du vill skapa anpassade navigeringskontroller skapar du en klass som sträcker sig från atlas.Control klassen eller skapar ett HTML-element och placerar det ovanför mappningsdiven. Låt den här användargränssnittskontrollen anropa maps-funktionen setCamera för att flytta kartan.