Haritaya denetim ekleme

Makale
11/16/2023

Bu makalede, tüm denetimler ve stil seçici ile harita oluşturma da dahil olmak üzere haritaya nasıl denetim ekleneceği gösterilmektedir.

Yakınlaştırma denetimi ekleme

Yakınlaştırma denetimi, haritayı yakınlaştırmak ve uzaklaştırmak için düğmeler ekler. Aşağıdaki kod örneği ZoomControl sınıfının bir örneğini oluşturur ve haritanın sağ alt köşesine ekler.

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

Pitch denetimi ekleme

Ses perdesi denetimi, ufka göre harita oluşturmak için perdeyi eğmeye yönelik düğmeler ekler. Aşağıdaki kod örneği PitchControl sınıfının bir örneğini oluşturur. PitchControl'i haritanın sağ üst köşesine ekler.

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

Pusula denetimi ekleme

Pusula denetimi, haritayı döndürmek için bir düğme ekler. Aşağıdaki kod örneği CompassControl sınıfının bir örneğini oluşturur ve haritanın sol alt köşesine ekler.

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

Tüm denetimlere sahip bir Harita

Birden çok denetim bir diziye yerleştirilebilir ve hepsi aynı anda haritaya eklenebilir ve geliştirmeyi basitleştirmek için haritanın aynı alanına konumlandırılabilir. Aşağıdaki kod parçacığı, bu yaklaşımı kullanarak haritaya standart gezinti denetimlerini ekler.

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

Aşağıdaki görüntüde haritanın sağ üst köşesinde yakınlaştırma, pusula, perde ve stil seçici denetimleri bulunan bir harita gösterilmektedir. Otomatik olarak nasıl yığılmış olduklarına dikkat edin. Betikteki denetim nesnelerinin sırası, haritada göründükleri sırayı belirler. Haritadaki denetimlerin sırasını değiştirmek için dizideki sıralarını değiştirebilirsiniz.

Stil seçici denetimi StyleControl sınıfı tarafından tanımlanır. Stil seçici denetimini kullanma hakkında daha fazla bilgi için bkz . Harita stili seçme.

Denetimleri özelleştirme

Gezinti Denetimi Seçenekleri örneği, denetimleri özelleştirmeye yönelik çeşitli seçenekleri test etmeye yönelik bir araçtır. Bu örneğin kaynak kodu için bkz . Gezinti Denetimi Seçenekleri kaynak kodu.

Özelleştirilmiş gezinti denetimleri oluşturmak istiyorsanız, sınıfından atlas.Control genişletilen bir sınıf oluşturun veya bir HTML öğesi oluşturup bunu harita div'in üzerine yerleştirin. Bu kullanıcı arabirimi denetiminin haritayı taşımak için haritalar setCamera işlevini çağırmasını sağlayın.