یک مجموعه داده به نقشه اضافه کنید

پلتفرم را انتخاب کنید: Android iOS JavaScript

FeatureStyleFunction ، جایی است که شما منطق را برای استایل دادن به ویژگی‌های انتخابی در یک مجموعه داده تعریف می‌کنید. بر اساس این منطق FeatureStyleOptions برمی گرداند. اگر منطق استایل مورد نیاز نیست، می‌توانید از FeatureStyleOptions برای تنظیم مستقیم سبک‌ها استفاده کنید. این صفحه به شما نشان می‌دهد که چگونه یک مجموعه داده را به نقشه اضافه کنید و یک ظاهر طراحی کنید.

پیش نیازها

قبل از ادامه، باید یک شناسه نقشه و سبک نقشه و یک شناسه مجموعه داده داشته باشید.

• یک شناسه نقشه و سبک نقشه ایجاد کنید
• ایجاد و آپلود مجموعه داده

شناسه مجموعه داده را با سبک نقشه مرتبط کنید

برای مرتبط کردن مجموعه داده خود با سبک نقشه ای که استفاده می کنید، مراحل زیر را انجام دهید:

1. در Google Cloud Console، به صفحه Datasets بروید .
2. روی نام مجموعه داده کلیک کنید. صفحه جزئیات Dataset ظاهر می شود.
3. روی تب Preview کلیک کنید.
4. به ADD MAP STYLE بروید و کلیک کنید.
   
5. روی کادر(های) انتخاب سبک(های) نقشه برای مرتبط کردن کلیک کنید و سپس روی ذخیره کلیک کنید.

احتیاط: رندر کردن چندین مجموعه داده بر روی نقشه می‌تواند بر عملکرد بسته به اندازه و تعداد مجموعه‌های داده تأثیر بگذارد.

از قوانین سبک ساده استفاده کنید

ساده‌ترین راه برای استایل دادن به ویژگی‌ها، ارسال FeatureStyleOptions برای تعریف ویژگی‌های سبک مانند رنگ، کدورت و وزن خط است. گزینه‌های سبک ویژگی را مستقیماً روی یک لایه ویژگی مجموعه داده اعمال کنید، یا از آنها در ارتباط با یک FeatureStyleFunction استفاده کنید.

TypeScript

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

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

از قوانین سبک اظهاری استفاده کنید

از FeatureStyleFunction برای تنظیم قوانین استایل به صورت اعلامی استفاده کنید و آنها را در کل مجموعه داده خود اعمال کنید. اعمال FeatureStyleOptions به یک ویژگی بر اساس مقادیر ویژگی مجموعه داده. همچنین می توانید از تابع سبک ویژگی خود null برگردانید، برای مثال اگر می خواهید زیرمجموعه ای از ویژگی ها نامرئی باقی بماند. این مثال یک تابع سبک را نشان می دهد که مجموعه ای از نقاط را بر اساس ویژگی های داده رنگ می کند:

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

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

اعمال سبک به لایه ویژگی مجموعه داده

برای اعمال سبک ها در تابع سبک ویژگی:

1. با فراخوانی map.getDatasetFeatureLayer() و ارسال شناسه مجموعه داده، لایه ویژگی مجموعه داده را دریافت کنید.
2. با تنظیم گزینه های سبک ویژگی (مثلا styleOptions ) یا تابع (مثلا setStyle ) در لایه داده، استایل را اعمال کنید.

TypeScript

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

یک ظاهر طراحی شده را از یک لایه حذف کنید

برای حذف استایل از یک لایه، style روی null قرار دهید:

featureLayer.style = null;

همچنین می توانید از تابع سبک ویژگی خود null برگردانید، برای مثال اگر می خواهید زیرمجموعه ای از ویژگی ها نامرئی باقی بماند.

متن انتساب را اضافه کنید

هنگام نمایش مجموعه داده های آپلود شده در Google Maps، نقشه شما باید هر گونه انتساب(های) مورد نیاز را نشان دهد. متن ذکر منبع نباید نشان‌واره Google را مخفی کند یا با آن تداخل داشته باشد.

یکی از راه‌های افزودن متن اسناد، استفاده از کنترل‌های سفارشی برای قرار دادن HTML دلخواه در موقعیت‌های استاندارد روی نقشه است. مثال کد زیر تابعی را نشان می دهد که به صورت برنامه نویسی یکی از این کنترل های سفارشی را ایجاد می کند:

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

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

هنگامی که کنترل تعریف شد، می توانید آن را در زمان اولیه سازی به نقشه اضافه کنید، همانطور که در اینجا نشان داده شده است:

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

// 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