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

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

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

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

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

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

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

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

1. في وحدة تحكّم Google Cloud، انتقِل إلى صفحة مجموعات البيانات.
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