Aracılığıyla paylaş


Haritaya denetim ekleme

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.

Yakınlaştırma, pusula, perde ve stil denetimlerini gösteren haritayı gösteren ekran görüntüsü.

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.

Ekranın sol tarafında, Denetim Konumu, Denetim Stili, Yakınlaştırma Deltası, Aralık Deltası, Pusula Döndürme Deltası, Seçici Stilleri ve Stil Seçici Düzeni özelliklerini değiştirmenizi sağlayan yakınlaştırma, pusula, perde ve stil denetimlerini ve seçenekleri gösteren haritayı gösteren Harita Gezinti Denetimi Seçenekleri örneğini gösteren ekran görüntüsü.

Ö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.

Sonraki adımlar

Bu makalede kullanılan sınıflar ve yöntemler hakkında daha fazla bilgi edinin:

Tam kod için aşağıdaki makalelere bakın: