Haritaya veri kümesi ekleme

Platform seçin: Android iOS JavaScript

FeatureStyleFunction, bir veri kümesindeki özellikleri seçerek stillendirmek için mantık tanımladığınız yerdir. Bu mantığa göre FeatureStyleOptions değerini döndürür. Stil mantığı gerekli değilse stilleri doğrudan ayarlamak için FeatureStyleOptions kullanabilirsiniz. Bu sayfada, haritaya nasıl veri kümesi ekleyeceğiniz ve stil uygulayacağınız gösterilmektedir.

Ö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. Aşağı gidip HARİTA STİLİ EKLE'yi 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 kolay yolu, renk, opaklık ve çizgi kalınlığı gibi stil özelliklerini tanımlamak için bir FeatureStyleOptions iletmektir. Özellik stili seçeneklerini doğrudan bir veri kümesi özellik katmanına uygulayın veya bunları bir 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ı bildirimli olarak ayarlamak ve tüm veri kümenize uygulamak için FeatureStyleFunction 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 döndürebilirsiniz. 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

Stili veri kümesi özellik katmanına 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. Veri kümesi katmanında özellik stili seçeneklerini (ör. styleOptions) veya işlevi (ör. setStyle) 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ğerini de döndürebilirsiniz. Örneğin, özelliklerin bir alt kümesinin görünmez kalmasını istiyorsanız bu değeri döndürebilirsiniz.

Atıf metni ekleme

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

Atıf metni eklemenin bir yolu, haritadaki standart konumlara rastgele HTML yerleştirmek için özel kontroller kullanmaktır. Aşağıdaki kod snippet'leri, bu örnekte atıflar için kullanılan HTML ve CSS'yi göstermektedir:

<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