Haritanın stilini değiştirme

Makale
08/05/2024

Harita denetimi birkaç farklı harita stili seçeneğini ve temel harita stillerini destekler. Harita denetimi başlatılırken tüm stiller ayarlanabilir. Alternatif olarak, harita denetiminin setStyle işlevini kullanarak stiller ayarlayabilirsiniz. Bu makalede, haritanın görünümünü özelleştirmek için bu stil seçeneklerini nasıl kullanacağınız ve haritanızda stil seçici denetimini nasıl uygulayabileceğiniz gösterilir. Stil seçici denetimi, kullanıcının farklı temel stiller arasında geçiş yapmasına olanak tanır.

Harita stili seçeneklerini ayarlama

Web denetimi başlatma sırasında stil seçenekleri ayarlanabilir. Alternatif olarak, harita denetiminin setStyle işlevini çağırarak stil seçeneklerini güncelleştirebilirsiniz. Kullanılabilir tüm stil seçeneklerini görmek için bkz . stil seçenekleri.

//Set the style options when creating the map.
var map = new atlas.Map('map', {
    renderWorldCopies: false,
    showLogo: true,
    showFeedbackLink: true,
    style: 'road'

    //Additional map options.
};

//Update the style options at anytime using `setStyle` function.
map.setStyle({
    renderWorldCopies: true,
    showLogo: false,
    showFeedbackLink: false
});

Farklı stillerin haritanın nasıl işlendiğini nasıl etkilediğini gösteren tam işlevsel bir örnek için Azure Haritalar Örnekleri'ndeki Eşleme stili seçeneklerine bakın. Bu örneğin kaynak kodu için bkz . Eşleme stili seçenekleri kaynak kodu.

Temel harita stili ayarlama

Harita denetimini, Web SDK'sında kullanılabilen temel eşleme stillerinden biriyle de başlatabilirsiniz. Ardından işlevini kullanarak setStyle temel stili farklı bir harita stiliyle güncelleştirebilirsiniz.

Başlatmada temel harita stili ayarlama

Başlatma sırasında harita denetiminin temel stilleri ayarlanabilir. Aşağıdaki koddastyle, harita denetiminin seçeneği grayscale_dark temel harita stiline ayarlanır.

var map = new atlas.Map('map', {
    style: 'grayscale_dark',

    //Additional map options
);

Harita yükleme işlemi sırasında ayarlanan gri tonlamalı koyu stili gösteren ekran görüntüsü.

Temel harita stilini güncelleştirme

Temel harita stili, işlevi kullanılarak setStyle güncelleştirilebilir ve seçeneği farklı bir temel harita stiline değiştirilecek veya daha fazla stil seçeneği eklenecek şekilde ayarlanabilir style .

Aşağıdaki kodda, bir harita örneği yüklendikten sonra, eşleme stili ile setStyle işlevinin kullanımına satellite güncelleştirilirgrayscale_dark.

map.setStyle({ style: 'satellite' });

Harita yükleme işleminden sonra ayarlanan uydu stilini gösteren ekran görüntüsü.

Stil seçici denetimini ekleme

Stil seçici denetimi, temel stiller arasında geçiş yapmak için son kullanıcı tarafından kullanılabilecek açılır panelli kullanımı kolay bir düğme sağlar.

Stil seçicinin iki farklı düzen seçeneği vardır: icon ve list. Ayrıca, stil seçici iki farklı stil seçici denetim style seçeneği belirlemenize olanak tanır: light ve dark. Bu örnekte, stil seçici düzeni kullanır icon ve temel harita stillerinin belirli bir listesini simge biçiminde görüntüler. Stil denetimi seçici aşağıdaki temel stil kümesini içerir: ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"]. Stil seçici denetim seçenekleri hakkında daha fazla bilgi için bkz . Stil Denetimi Seçenekleri.

Aşağıdaki resimde düzende icon görüntülenen stil seçici denetimi gösterilmektedir.

Aşağıdaki resimde düzende list görüntülenen stil seçici denetimi gösterilmektedir.

Stil seçici liste düzeni

Önemli

Varsayılan olarak stil seçici denetimi, Azure Haritalar 1. Nesil (S0) fiyatlandırma katmanı altında kullanılabilen tüm stilleri listeler. Bu listedeki stillerin sayısını azaltmak istiyorsanız, listede görünmesini istediğiniz stillerin bir dizisini stil seçici seçeneğine mapStyle geçirin. 1. Nesil (S1) veya 2. Nesil fiyatlandırma katmanını kullanıyorsanız ve tüm kullanılabilir stilleri göstermek istiyorsanız, stil seçici seçeneğini olarak "all"ayarlayınmapStyles.

1. Nesil fiyatlandırma katmanını kullanımdan kaldırmayı Azure Haritalar

1. Nesil fiyatlandırma katmanı artık kullanım dışıdır ve 15.09.26 tarihinde kullanımdan kaldırılacaktır. 2. Nesil fiyatlandırma katmanı, 1. Nesil (hem S0 hem de S1) fiyatlandırma katmanının yerini alır. Azure Haritalar hesabınızda 1. Nesil fiyatlandırma katmanı seçiliyse kullanımdan kaldırılmadan önce 2. Nesil fiyatlandırma katmanına geçebilirsiniz, aksi takdirde otomatik olarak güncelleştirilir. Daha fazla bilgi için bkz. Azure Haritalar hesabınızın fiyatlandırma katmanını yönetme.

Aşağıdaki kod, varsayılan mapStyles temel stil listesini nasıl geçersiz kılabileceğinizi gösterir. Bu örnekte, stil seçici denetiminde mapStyles görüntülenecek temel stilleri listeleme seçeneğini ayarlıyoruz.

/*Add the Style Control to the map*/
map.controls.add(new atlas.control.StyleControl({
  mapStyles: ['road', 'grayscale_dark', 'night', 'road_shaded_relief', 'satellite', 'satellite_road_labels'],
  layout: 'list'
}), {
  position: 'top-right'
});

Düzen özelliğinin liste olarak ayarlandığı Stil seçici denetiminin yer aldığı haritayı gösteren ekran görüntüsü.