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

اختيار النظام الأساسي: 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 من دالة نمط العناصر، على سبيل المثال إذا أردت أن تظل مجموعة فرعية من العناصر غير مرئية.

إضافة نص تحديد المصدر

يجب أن تعرض خريطتك أيّ مصادر مطلوبة عند عرض مجموعة بيانات uploaded على "خرائط 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