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

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

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

پیش‌نیازها

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

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

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

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

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

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

تایپ اسکریپت 

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

جاوا اسکریپت 

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

index.js

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

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

تایپ اسکریپت 

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

جاوا اسکریپت 

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

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

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

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

تایپ اسکریپت 

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

جاوا اسکریپت 

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;

index.js

حذف استایل از یک لایه

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

featureLayer.style = null;

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

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

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

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

تایپ اسکریپت 

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

جاوا اسکریپت 

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

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

تایپ اسکریپت 

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

جاوا اسکریپت 

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