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

اختيار النظام الأساسي: 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

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

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

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

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

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