Haritaya veri kümesi ekleme

FeatureStyleFunction, bir veri kümesindeki özelliklerin seçici bir şekilde stilini belirlemek için mantığı 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 öğesini kullanabilirsiniz. Bu sayfada, haritaya veri kümesi ekleme ve stil uygulama özellikleri gösterilmektedir.

Ön koşullar

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

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üntülenir.
  3. Önizleme sekmesini tıklayın.
  4. Aşağı kaydırın ve HARİTA STİLİ EKLE'yi tıklayın.
    HARİTA STİLİ EKLE düğmesinin ekran görüntüsü.
  5. İlişkilendirilecek Harita Stilleri için onay kutularını tıklayın ve ardından KAYDET'i tıklayın.

Basit stil kuralları kullanma

Ö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

JavaScript

const styleOptions = {
  strokeColor: "green",
  strokeWeight: 2,
  strokeOpacity: 1,
  fillColor: "green",
  fillOpacity: 0.3,
};

index.js

Bildirim temelli stil kuralları kullan

Stil kurallarını bildirimli şekilde ayarlamak için FeatureStyleFunction bileşenini kullanın ve bunları tüm veri kümenize uygulayın. Veri kümesi özellik değerlerine göre bir özelliğe FeatureStyleOptions uygulayın. Ayrıca, ö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

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 uygula

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

  1. map.getDatasetFeatureLayer() yöntemini çağırıp veri kümesi kimliğini ileterek veri kümesi özellik katmanını edinin.
  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

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;

index.js

Katmandan stil kaldırma

Bir katmandan stili kaldırmak için style özelliğini 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.

Atıf metni ekle

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 engellememelidir.

İlişkilendirme metni eklemenin bir yolu, haritadaki standart konumlara rastgele HTML yerleştirmek için özel kontroller 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

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

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