Haritaya veri kümesi ekleme

Platform seçin: Android iOS JavaScript

FeatureStyleFunction, bir veri kümesindeki özellikleri seçerek stil uygulamak için mantık tanımladığınız yerdir. Bu mantığa göre FeatureStyleOptions döndürür. Stil oluşturma 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 bir açık renkli harita stilini 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ı gösterilir.
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 bunları 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

Bildirimsel stil kurallarını kullanma

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

TypeScript

function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break; 
    }
}
index.ts

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

JavaScript

function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { fillColor: "black", pointRadius: 8 };
      break;
    case "Cinnamon+":
      return /* FeatureStyleOptions */ { fillColor: "#8b0000", pointRadius: 8 };
      break;
    case "Cinnamon+Gray":
      return /* FeatureStyleOptions */ {
        fillColor: "#8b0000",
        strokeColor: "gray",
        pointRadius: 6,
      };
      break;
    case "Cinnamon+White":
      return /* FeatureStyleOptions */ {
        fillColor: "#8b0000",
        strokeColor: "white",
        pointRadius: 6,
      };
      break;
    case "Gray+":
      return /* FeatureStyleOptions */ { fillColor: "gray", pointRadius: 8 };
      break;
    case "Gray+Cinnamon":
      return /* FeatureStyleOptions */ {
        fillColor: "gray",
        strokeColor: "#8b0000",
        pointRadius: 6,
      };
      break;
    case "Gray+Cinnamon, White":
      return /* FeatureStyleOptions */ {
        fillColor: "silver",
        strokeColor: "#8b0000",
        pointRadius: 6,
      };
      break;
    case "Gray+White":
      return /* FeatureStyleOptions */ {
        fillColor: "gray",
        strokeColor: "white",
        pointRadius: 6,
      };
      break;
    default: // Color not defined.
      return /* FeatureStyleOptions */ { 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() işlevini çağırarak 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

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

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

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

Katmandan stil kaldırma

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

featureLayer.style = null;

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

Atıf metni ekleme

Yüklenen veri kümeleri Google Haritalar'da gösterilirken haritanızda gerekli tüm ilişkilendirmeler gösterilmelidir. İlişkilendirme metni, Google logosunu kapatmamalı veya Google logosunun görünmesini engellememelidir.

Atıf metni eklemenin bir yolu, haritada standart konumlara rastgele HTML yerleştirmek için özel kontroller kullanmaktır. Aşağıdaki kod örneğinde, bu tür bir özel denetimi programatik olarak oluşturan bir işlev gösterilmektedir:

TypeScript

function createAttribution(map) {
    const attributionLabel = document.createElement('div');
    // Define CSS styles.
    attributionLabel.style.backgroundColor = '#fff';
    attributionLabel.style.opacity = '0.7';
    attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
    attributionLabel.style.fontSize = '10px';
    attributionLabel.style.padding = '2px';
    attributionLabel.style.margin = '2px';
    attributionLabel.textContent = 'Data source: NYC Open Data';
    return attributionLabel;
}
index.ts

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

JavaScript

function createAttribution(map) {
  const attributionLabel = document.createElement("div");

  // Define CSS styles.
  attributionLabel.style.backgroundColor = "#fff";
  attributionLabel.style.opacity = "0.7";
  attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
  attributionLabel.style.fontSize = "10px";
  attributionLabel.style.padding = "2px";
  attributionLabel.style.margin = "2px";
  attributionLabel.textContent = "Data source: NYC Open Data";
  return attributionLabel;
}
index.js

Denetim tanımlandıktan sonra, burada gösterildiği gibi başlatma sırasında haritaya ekleyebilirsiniz:

TypeScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement('div');
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
index.ts

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

JavaScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement("div");
const attributionControl = createAttribution(map);

attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
index.js