طراحی نقشه جدید به زودی به پلتفرم نقشه های گوگل ارائه می شود. این به‌روزرسانی برای استایل نقشه شامل یک پالت رنگ پیش‌فرض جدید و بهبودهایی در تجربیات نقشه و قابلیت استفاده است. همه سبک‌های نقشه به‌طور خودکار در مارس 2025 به‌روزرسانی می‌شوند. برای اطلاعات بیشتر در مورد در دسترس بودن و نحوه انتخاب زودتر، به سبک نقشه جدید برای پلتفرم Google Maps مراجعه کنید.

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

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

پیش نیازها

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

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

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

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

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

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

TypeScript

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 را برگردانید، برای مثال اگر می خواهید زیرمجموعه ای از ویژگی ها نامرئی باقی بماند. این مثال یک تابع سبک را نشان می دهد که مجموعه ای از نقاط را بر اساس ویژگی های داده رنگ می کند:

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

جاوا اسکریپت

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

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

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

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

TypeScript

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 را برگردانید، برای مثال اگر می خواهید زیرمجموعه ای از ویژگی ها نامرئی باقی بماند.

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

هنگام نمایش مجموعه داده های آپلود شده در 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

جاوا اسکریپت

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

جاوا اسکریپت

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