Vezérlőelemek hozzáadása térképhez

Cikk
11/08/2024

Ez a cikk bemutatja, hogyan adhat hozzá vezérlőket egy térképhez, beleértve azt is, hogyan hozhat létre térképet az összes vezérlővel és stílusválasztóval.

Nagyítási vezérlő hozzáadása

A nagyítási vezérlő gombokat ad a térkép nagyításához és kicsinyítéséhez. Az alábbi kódminta létrehozza a ZoomControl osztály egy példányát, és hozzáadja a térkép jobb alsó sarkához.

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

Hangmagasság-vezérlés hozzáadása

A hangmagasság-vezérlő gombokkal dönti el a pályát a horizonthoz viszonyított leképezéshez. Az alábbi kódminta létrehozza a PitchControl osztály egy példányát. Hozzáadja a PitchControlt a térkép jobb felső sarkához.

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

Iránytű vezérlőelem hozzáadása

Az iránytű vezérlőelem hozzáad egy gombot a térkép elforgatására. Az alábbi kódminta létrehozza a CompassControl osztály egy példányát, és hozzáadja a térkép bal alsó sarkához.

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

Méretezési vezérlő hozzáadása

A méretezési vezérlő egy méretezési sávot ad hozzá a térképhez. Az alábbi kódminta létrehozza a ScaleControl osztály egy példányát, és hozzáadja a térkép bal alsó sarkához.

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

Teljes képernyős vezérlő hozzáadása

A teljes képernyős vezérlő egy gombot ad hozzá a térkép vagy a megadott HTML-elem teljes képernyős és normál nézet közötti váltásához. Az alábbi kódminta létrehozza a FullscreenControl osztály egy példányát, és hozzáadja a térkép jobb felső sarkához.

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

Térkép az összes vezérlővel

Több vezérlőt is elhelyezhet egy tömbben, és egyszerre hozzáadhatja a térképhez, és a térkép ugyanazon területén elhelyezve egyszerűsítheti a fejlesztést. Az alábbi kódrészlet ezzel a módszerrel adja hozzá a szabványos navigációs vezérlőket a térképhez.

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',
  }
);

Az alábbi képen egy térkép látható, amelyen a térkép jobb felső sarkában a nagyítás, a hangmagasság, az iránytű, a stílus, a teljes képernyős és a méretezési vezérlők láthatók. Figyelje meg, hogyan halmozódnak fel automatikusan. A szkript vezérlőobjektumainak sorrendje határozza meg, hogy milyen sorrendben jelenjenek meg a térképen. A térkép vezérlőinek sorrendjének módosításához módosíthatja azok sorrendjét a tömbben.

A stílusválasztó vezérlőt a StyleControl osztály határozza meg. A stílusválasztó vezérlőelem használatáról további információt a térképstílus kiválasztása című témakörben talál.

Vezérlők testreszabása

A Navigációs vezérlő beállításai minta egy eszköz, amely teszteli a vezérlők testreszabásának különböző lehetőségeit. A minta forráskódját a Navigációs vezérlő beállításai forráskódban találhatja meg.

A Teljes képernyős vezérlő beállításai minta egy eszközt biztosít a teljes képernyős vezérlő testreszabási lehetőségeinek teszteléséhez. A minta forráskódját a Teljes képernyős vezérlő beállításai forráskódban találhatja meg.

Ha testre szabott navigációs vezérlőket szeretne létrehozni, hozzon létre egy osztályt, amely kiterjeszthető az atlas.Control osztályból, vagy hozzon létre egy HTML-elemet, és helyezze azt a térkép div fölé. A felhasználói felület vezérlője hívja meg a térképfüggvényt setCamera a térkép áthelyezéséhez.