Haritaya veri kümesi ekleme

Platform seçin: Android iOS JavaScript

FeatureStyleFunction, bir veri kümesindeki özellikleri seçerek stil vermek için mantık tanımladığınız yerdir. Bu mantığa göre FeatureStyleOptions değerini döndürür. Stil mantığı gerekmiyorsa stilleri doğrudan ayarlamak için FeatureStyleOptions kullanabilirsiniz. Bu sayfada, haritaya veri kümesi ekleme ve stil uygulama işlemleri açıklanmaktadır.

Ön koşullar

Devam etmeden önce bir harita kimliğiniz, harita stiliniz ve veri kümesi kimliğiniz olmalıdır.

• Harita kimliği ve harita stili oluşturma
• Veri kümesi oluşturma ve yükleme

Veri kümesi kimliğini harita stiliyle ilişkilendirme

Deneysel: Bu özellik yalnızca açık renkli harita stilleri için ayarlanabilir. Bu özelliğin etkinleştirildiği açık renkli bir harita stilini bir harita kimliğine bağladığınızda, etkinleştirilen katmanlar koyu renkli harita stilinde de kullanılabilir.

Veri kümenizi kullandığınız harita stiliyle ilişkilendirmek için aşağıdaki adımları uygulayın:

1. Google Cloud Console'da Veri kümeleri sayfasına gidin.
2. Veri kümesinin adını tıklayın. Veri kümesi ayrıntıları sayfası açılır.
3. Önizleme sekmesini tıklayın.
4. HARİTA STİLİ EKLE'ye gidip tıklayın.
   
5. İlişkilendirilecek harita stillerinin onay kutularını işaretleyin ve KAYDET'i tıklayın.

Dikkat: Bir haritada birden fazla veri kümesi oluşturmak, veri kümelerinin boyutuna ve sayısına bağlı olarak performansı etkileyebilir.

Basit stil kuralları kullanma

Özellikleri stilize etmenin en basit yolu, renk, opaklık ve çizgi kalınlığı gibi stil özelliklerini tanımlamak için FeatureStyleOptions iletmektir. Özellik stili seçeneklerini doğrudan bir veri kümesi özellik katmanına uygulayın veya FeatureStyleFunction ile birlikte kullanın.

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.ts

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

JavaScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.js

Bildirim temelli stil kuralları kullanma

Stil kurallarını bildirimsel olarak ayarlamak ve bunları veri kümenizin tamamına uygulamak için FeatureStyleFunction simgesini kullanın. Veri kümesi özellik değerlerine göre bir özelliğe FeatureStyleOptions uygulayın. Özellik stili işlevinizden null değerini de döndürebilirsiniz. Örneğin, özelliklerin bir alt kümesinin görünmez kalmasını istiyorsanız bu değeri kullanabilirsiniz. Bu örnekte, bir dizi noktayı veri özelliklerine göre renklendiren bir stil işlevi gösterilmektedir:

TypeScript

function setStyle(params: { feature: google.maps.Feature }) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature as google.maps.DatasetFeature;
    // Get all of the needed dataset attributes.
    const furColors =
        datasetFeature.datasetAttributes.CombinationofPrimaryandHighlightColor;

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}
index.ts

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

JavaScript

function setStyle(params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors =
        datasetFeature.datasetAttributes.CombinationofPrimaryandHighlightColor;

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}
index.js

Veri kümesi özellik katmanına stil uygulama

Özellik stili işlevindeki stilleri uygulamak için:

1. Veri kümesi kimliğini ileterek map.getDatasetFeatureLayer() yöntemini çağırıp veri kümesi özellik katmanını alın.
2. Özellik stili seçeneklerini (ör. styleOptions) veya işlevini (ör. setStyle) veri kümesi katmanında ayarlayarak stili uygulayın.

TypeScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.ts

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

JavaScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.js

Bir katmandan stil kaldırma

Bir katmandan stil kaldırmak için style değerini null olarak ayarlayın:

featureLayer.style = null;

Özellik stili işlevinizden null de döndürebilirsiniz. Örneğin, özelliklerin bir alt kümesinin görünmez kalmasını istiyorsanız bu yöntemi kullanabilirsiniz.

Atıf metni ekleme

Yüklenen veri kümeleri Google Haritalar'da gösterilirken haritanızda gerekli tüm ilişkilendirmeler gösterilmelidir. Atıf metni, Google logosunu engellememeli veya logoya müdahale etmemelidir.

Haritada rastgele HTML'yi standart konumlara yerleştirmek için özel kontrolleri kullanarak atıf metni ekleyebilirsiniz. Aşağıdaki kod snippet'lerinde, bu örnekteki atıflar için kullanılan HTML ve CSS gösterilmektedir:

<gmp-map
    center="40.757815, -73.933123"
    zoom="11"
    map-id="5cd2c9ca1cf05670"
    map-type-control="false">
    <div id="attribution" slot="control-block-end-inline-start">
        Data source: NYC Open Data
    </div>
</gmp-map>
index.html

#attribution {
    background-color: rgba(255, 255, 255, 0.7);
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 10px;
    padding: 2px;
    margin: 2px;
}
style.css