Haritanın stilini değiştirme

Makale
09/22/2023

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 stilleri 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ını sağlar.

Harita stili seçeneklerini ayarlama

Stil seçenekleri web denetimi başlatma sırasında 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 bulunan temel eşleme stillerinden biriyle de başlatabilirsiniz. Ardından, temel stili farklı bir harita stiliyle güncelleştirmek için işlevini kullanabilirsiniz setStyle .

Başlatmada temel harita stili ayarlama

Başlatma sırasında harita denetiminin temel stilleri ayarlanabilir. Aşağıdaki kodda, style 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 eşleme örneği yüklendikten sonra eşleme stili, setStyle işlevinin kullanıldığı şekilde güncelleştirilir grayscale_darksatellite.

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 denetimi 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 bir seçim 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 bulunan tüm stilleri listeler. Bu listedeki stillerin sayısını azaltmak istiyorsanız, listede görünmesini istediğiniz stil 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ığı bir haritayı gösteren ekran görüntüsü.