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

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