إضافة مجموعة بيانات إلى خريطة

هذا المنتج أو هذه الميزة في مرحلة المعاينة (ما قبل التوفّر للجمهور العام). قد يتوفّر دعم محدود للمنتجات والميزات المتوفّرة في مرحلة ما قبل التوفّر للجمهور العام، وقد لا تتوافق التغييرات في المنتجات والميزات المتوفّرة في مرحلة ما قبل التوفّر للجمهور العام مع الإصدارات الأخرى المتاحة في مرحلة ما قبل التوفّر للجمهور العام. تخضع "عروض مرحلة ما قبل التوفّر للجمهور العام" للأحكام الخاصة بخدمة "منصة خرائط Google". لمزيد من المعلومات، يُرجى الاطّلاع على أوصاف مرحلة الإطلاق.

FeatureStyleFunction، هي المكان الذي يمكنك فيه تحديد المنطق لاختيار نمط العناصر بشكل انتقائي في مجموعة بيانات. وتعرض FeatureStyleOptions بناءً على هذا المنطق. إذا لم يكن منطق التصميم مطلوبًا، يمكنك استخدام FeatureStyleOptions لضبط الأنماط مباشرةً. توضح لك هذه الصفحة كيفية إضافة مجموعة بيانات إلى خريطة وتطبيق النمط.

المتطلّبات الأساسية

قبل المتابعة، يجب أن يكون لديك معرف خريطة ونمط خريطة ومعرف مجموعة بيانات.

• إنشاء رقم تعريف الخريطة ونمط الخريطة
• إنشاء مجموعة بيانات وتحميلها

ربط معرّف مجموعة بيانات بنمط خريطة

اتخذ الخطوات التالية لربط مجموعة البيانات بنمط الخريطة الذي تستخدمه:

1. في Google Cloud Console، انتقِل إلى صفحة مجموعات البيانات.
2. انقر فوق اسم مجموعة البيانات. ستظهر صفحة تفاصيل مجموعة البيانات.
3. انقر على علامة التبويب معاينة.
4. مرِّر لأسفل وانقر على إضافة نمط الخريطة.
   
5. انقر على مربّعات الاختيار لأنماط الخرائط المطلوب ربطها، ثم انقر على حفظ.

تنبيه: قد يؤدي عرض مجموعات بيانات متعددة على خريطة إلى التأثير في الأداء استنادًا إلى حجم مجموعات البيانات وعددها.

استخدام قواعد النمط البسيطة

أبسط طريقة لتصميم الميزات هي تمرير FeatureStyleOptions لتحديد سمات النمط مثل اللون والتعتيم ووزن الخط. يمكنك تطبيق خيارات نمط الميزة مباشرةً على طبقة عناصر مجموعة البيانات أو استخدامها بالاقتران مع FeatureStyleFunction.

TypeScript

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

ملاحظة: اقرأ الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

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

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

تطبيق النمط على طبقة عناصر مجموعة البيانات

لتطبيق الأنماط في دالة نمط الميزة:

1. احصل على طبقة ميزة مجموعة البيانات عن طريق استدعاء map.getDatasetFeatureLayer()، وتمرير معرّف مجموعة البيانات.
2. يمكنك تطبيق النمط من خلال ضبط خيارات نمط العنصر (مثل styleOptions) أو الدالة (مثل setStyle) على طبقة مجموعة البيانات.

TypeScript

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

ملاحظة: اقرأ الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

إزالة التصميم من طبقة

لإزالة التصميم من طبقة معيّنة، اضبط style على null:

featureLayer.style = null;

ويمكنك أيضًا عرض null من دالة نمط الميزة، إذا كنت تريد مثلاً أن تظل مجموعة فرعية من الميزات غير مرئية.

إضافة نص الإحالة

يجب أن تعرض الخريطة أي مراجع مطلوبة عند عرض مجموعات البيانات التي تم تحميلها على "خرائط Google". يجب ألا يحجب نص تحديد المصدر شعار 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".

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

بمجرد تحديد عنصر التحكم، يمكنك إضافته إلى الخريطة في وقت التهيئة، كما هو موضح هنا:

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

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