Haritaya veri kümesi ekleme

FeatureStyleFunction, Burada, veri kümesindeki özelliklere seçici olarak stil eklemek için mantığı tanımlarsınız. Google FeatureStyleOptions değerini döndürür bu mantığa dayalıdır. Stil mantığı gerekli değilse FeatureStyleOptions öğesini kullanabilirsiniz. değerini ayarlayın. Bu sayfada, haritaya nasıl veri kümesi eklenebileceği gösterilmektedir stil uygulayabilirsiniz.

Ön koşullar

Devam etmeden önce 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, üzerinde çalıştığınız harita stiliyle ilişkilendirmek için aşağıdaki adımları şunu kullanarak:

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. Ekranı kaydırarak HARİTA STİLİ EKLE'ye gidin ve tıklayın.
   
5. İlişkilendirilecek Harita Stilleri için onay kutularını tıklayın ve ardından KAYDET.

Dikkat: Bir haritada birden fazla veri kümesinin oluşturulması, aşağıdaki faktörlere bağlı olarak performansı etkileyebilir: değişiklik gösterebiliyor.

Basit stil kuralları kullanma

Özelliklerin stilini belirlemenin en basit yolu, özellikleri tanımlamak için FeatureStyleOptions renk, opaklık ve çizgi kalınlığı gibi stil özelliklerini içerir. Özellik stilini uygula seçeneklerini doğrudan bir veri kümesi özellik katmanına ekleyebilir veya bunları FeatureStyleFunction

TypeScript

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

.

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

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 ve uygulamak için FeatureStyleFunction öğesini kullanın . FeatureStyleOptions özelliğini şu kriterlere göre bir özelliğe uygula: veri kümesi özellik değerleridir. null ürününü kendi özellik stilinizden de iade edebilirsiniz işlevini kullanabilirsiniz. Bu örnek, verilere dayalı olarak bir dizi noktayı renklendiren bir stil işlevini göstermektedir özellikler:

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 uygula

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

1. map.getDatasetFeatureLayer() çağırarak veri kümesi özellik katmanını alın. veri kümesi kimliğini iletmek için kullanılır.
2. Özellik stili seçeneklerini ayarlayarak stili uygulayın (ör. styleOptions) veya işlev (ör. setStyle) ekleyin.

TypeScript

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

.

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

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, özellik stili işlevinizden null değerini de döndürebilirsiniz (örneğin, bir alt kümenin görünmez kalmasını istiyor.

Atıf metni ekle

Haritanız, yüklenen öğeler gösterilirken gerekli tüm atıfları göstermelidir veri kümelerini Google Haritalar'da bulabilirsiniz. Atıf metni, Google logosu

İlişkilendirme metni eklemenin bir yolu da özel kontrolleri kullanmaktır. rastgele HTML'yi haritadaki standart konumlara yerleştirin. Aşağıdaki kod örnek, programlı bir şekilde böyle bir özel kontrol oluşturan bir işlevi göstermektedir:

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'ı kullanma ile 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, başlatma sırasında haritaya ekleyebilirsiniz. burada gösterildiği gibi:

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'ı kullanma ile 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