Haritaya veri kümesi ekleme

Platform seçin: Android iOS JavaScript

FeatureStyleFunction, bir veri kümesindeki özellikleri seçerek biçimlendirmek için mantığı tanımladığınız yerdir. Bu mantıka göre FeatureStyleOptions döndürür. Stil mantığı gerekli değilse stilleri doğrudan ayarlamak için FeatureStyleOptions öğesini kullanabilirsiniz. Bu sayfada, bir haritaya veri kümesi ekleme ve stil uygulama işlemleri 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

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örünür.
3. Önizleme sekmesini tıklayın.
4. MAP STYLE EKLE'ye gidip tıklayın.
   
5. İlişkilendirilecek harita stillerinin onay kutularını ve ardından KAYDET'i tıklayın.

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

Basit stil kuralları kullanın

Özelliklerin stil özelliklerini ayarlamanın en basit yolu renk, opaklık ve çizgi kalınlığı gibi stil özelliklerini tanımlamak için FeatureStyleOptions parametresi 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

Beyan stil kurallarını kullanma

Stil kurallarını açık bir şekilde ayarlamak ve veri kümenizin tamamına uygulamak için FeatureStyleFunction öğesini kullanın. Veri kümesi özellik değerlerine göre bir özelliğe FeatureStyleOptions uygulayın. Örneğin, bir özellik alt kümesinin görünmez kalmasını istiyorsanız özellik stili işlevinizden null değerini de döndürebilirsiniz. Bu örnekte, bir noktayı veri özelliklerine dayanarak 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'ı kullanma ile 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() çağrısını yaparak 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 stili kaldırma

Bir katmandan stili kaldırmak için style'ü null olarak ayarlayın:

featureLayer.style = null;

Ayrıca, örneğin özelliklerin bir alt kümesinin görünmez kalmasını isterseniz, özellik stili işlevinizden null değerini de döndürebilirsiniz.

İlişkilendirme metni ekleme

Yüklenen veri kümeleri Google Haritalar'da gösterilirken haritanızda gerekli tüm atıflar gösterilmelidir. İlişkilendirme metni, Google logosunu gizlememeli veya engellememelidir.

İlişkilendirme metni eklemenin bir yolu, haritadaki standart konumlara rastgele HTML yerleştirmek için özel kontrolleri kullanmaktır. Aşağıdaki kod örneğinde, programlı bir şekilde böyle bir özel kontrol 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

Kontrol tanımlandıktan sonra, ilk kullanıma hazırlanırken kontrolü haritaya ekleyebilirsiniz. Bunun için aşağıdaki adımları izleyin:

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