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

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

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