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

اختيار النظام الأساسي: Android iOS JavaScript

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 من دالة نمط الميزة، مثلاً إذا كنت تريد إبقاء مجموعة فرعية من الميزات غير مرئية. يعرض هذا المثال دالة نمط تُلوّن مجموعة من النقاط استنادًا إلى سمات data:

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