طبقة بيانات

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

توفر طبقة بيانات خرائط Google حاوية للبيانات الجيوفضائية العشوائية. يمكنك استخدام طبقة البيانات لتخزين بياناتك المخصصة أو عرض بيانات GeoJSON على خريطة Google.

نظرة عامة

شاهِد فيديو DevBytes هذا لمعرفة المزيد من المعلومات حول طبقة البيانات.

باستخدام واجهة برمجة تطبيقات JavaScript للخرائط، يمكنك ترميز خريطة بمجموعة متنوعة من التراكبات، مثل العلامات والخطوط المتعددة والمضلعات وما إلى ذلك. وتجمع كل تعليقات توضيحية من هذه التعليقات معلومات النمط مع بيانات الموقع. والفئة google.maps.Data هي حاوية للبيانات الجيوفضائية العشوائية. بدلاً من إضافة هذه التراكبات، يمكنك استخدام طبقة البيانات لإضافة بيانات جغرافية عشوائية إلى خريطتك. إذا كانت هذه البيانات تحتوي على أشكال هندسية، مثل نقاط أو خطوط أو مضلّعات، ستعرض واجهة برمجة التطبيقات هذه الأشكال بشكل افتراضي على شكل علامات أو خطوط متعدّدة أو مضلّعات. يمكنك تصميم هذه الميزات كما تفعل مع تراكب عادي، أو تطبيق قواعد النمط بناءً على الخصائص الأخرى المضمنة في مجموعة البيانات الخاصة بك.

يسمح لك الصف "google.maps.Data" بما يلي:

  • ارسم مضلّعات على خريطتك.
  • أضِف بيانات GeoJSON إلى خريطتك.
    GeoJSON هي معيار للبيانات الجيوفضائية على الإنترنت. وتتّبع الفئة Data بنية GeoJSON في تمثيل البيانات وتسهّل عرض بيانات GeoJSON. ويمكنك استخدام الطريقة loadGeoJson() لاستيراد بيانات GeoJSON بسهولة وعرض النقاط والسلاسل الخطية والمضلعات.
  • استخدِم السمة google.maps.Data لوضع نماذج للبيانات العشوائية.
    لدى معظم الكيانات الحقيقية خصائص أخرى مرتبطة بها. على سبيل المثال، تحرص المتاجر على ساعات العمل والطرقات بسرعة حركة المرور، وكل فردة من فرقة المرشدات يكون لديها عشب لبيع الكعك. وباستخدام google.maps.Data، يمكنك وضع نماذج لهذه السمات وتصميم بياناتك وفقًا لذلك.
  • يمكنك اختيار طريقة تمثيل بياناتك وتغيير رأيك بشكل فوري.
    تتيح لك طبقة البيانات اتّخاذ قرارات بشأن التمثيل البصري لبياناتك والتفاعل معها. على سبيل المثال، عند الاطّلاع على خريطة للمتاجر الصغيرة، يمكنك اختيار عرض المتاجر التي تبيع تذاكر النقل العام فقط.

رسم مضلّع

تعالج الفئة Data.Polygon المضلع المتعرّج لك. يمكنك تمرير مصفوفة من حلقة خطية واحدة أو أكثر، تُحدَّد كإحداثيات خطوط الطول/العرض. وتحدّد الحلقة الخطية الأولى الحدود الخارجية للمضلّع. إذا مررت أكثر من حلقة خطية واحدة، يتم استخدام الحلقة الخطية الثانية والحلقات اللاحقة لتحديد المسارات الداخلية (الثقوب) في المضلّع.

يُنشئ المثال التالي مضلّعًا مستطيلاً فيه فتحتان:

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 },
    { lat: -35.364, lng: 153.207 },
    { lat: -35.364, lng: 158.207 },
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;
index.js

تحميل GeoJSON

GeoJSON هو معيار شائع لمشاركة البيانات الجيوفضائية على الإنترنت. إنه خفيف الوزن وسهل القراءة للمستخدم، مما يجعله مثاليًا للمشاركة والتعاون. باستخدام طبقة البيانات، يمكنك إضافة بيانات GeoJSON إلى خريطة Google في سطر واحد فقط من الرموز.

map.data.loadGeoJson('google.json');

تحتوي كل خريطة على عنصر map.data يعمل كطبقة بيانات للبيانات الجيوفضائية العشوائية، بما في ذلك GeoJSON. يمكنك تحميل ملف GeoJSON وعرضه من خلال استدعاء الطريقة loadGeoJSON() للكائن data. يوضح المثال أدناه كيفية إضافة خريطة وتحميل بيانات GeoJSON الخارجية.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json",
  );
}

window.initMap = initMap;
index.js
الاطّلاع على مثال

تجربة العينة

نموذج GeoJSON

تستخدم معظم الأمثلة في هذه الصفحة ملف GeoJSON الشائع. يقوم هذا الملف بتعريف الأحرف الستة في "Google" كمضلعات فوق أستراليا. يُرجى عدم التردد في نسخ هذا الملف أو تعديله عند اختبار طبقة البيانات.

ملاحظة: لتحميل ملف json من نطاق آخر، يجب أن يكون هذا النطاق قد فعّل مشاركة الموارد المتعدّدة المصادر.

يمكن الاطّلاع أدناه على النص الكامل للملف من خلال توسيع السهم الصغير بجانب الكلمات google.json.

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

بيانات GeoJSON حسب نمط

استخدِم الطريقة Data.setStyle() لتحديد الشكل الذي يجب أن تظهر به بياناتك. تعتمد الطريقة setStyle() إما حرفيًا لكائن StyleOptions أو دالة تحتسب النمط لكل ميزة.

قواعد نمط بسيطة

إنّ أبسط طريقة لتصميم الميزات هي تمرير كائن StyleOptions حرفيًا إلى setStyle(). سيؤدي ذلك إلى تعيين نمط واحد لكل ميزة في مجموعتك. وتجدر الإشارة إلى أن كل نوع من أنواع الميزات قادر فقط على عرض مجموعة فرعية من الخيارات المتاحة. وهذا يعني أنه يمكن الجمع بين أنماط لأنواع مختلفة من الميزات في كائن واحد حرفي. على سبيل المثال، يضبط المقتطف أدناه كلاً من icon المخصّصة، والتي تؤثر فقط على الأشكال الهندسية للنقاط، وfillColor، التي تؤثر فقط في المضلّعات.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

يمكن العثور على مزيد من المعلومات حول مجموعات الأنماط/الميزات الصالحة في خيارات النمط.

في ما يلي مثال على ضبط الشطب ولون التعبئة للعديد من الميزات باستخدام الحرف StyleOptions للكائن StyleOptions. لاحظ أن كل مضلّع يحمل نفس النمط.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

قواعد النمط التعريفي

إذا كنت ترغب في تحديث نمط عدد كبير من التراكبات، مثل العلامات أو الخطوط المتعددة، فسيتعين عليك عادةً التكرار خلال كل تراكب على الخريطة وتعيين نمطه على حدة. باستخدام طبقة البيانات، يمكنك تعيين القواعد بيانيًا وسيتم تطبيقها عبر مجموعة البيانات بالكامل. عند تحديث البيانات أو القواعد، سيتم تطبيق النمط تلقائيًا على كل ميزة. يمكنك استخدام خصائص الميزات لتخصيص نمطها.

على سبيل المثال، يحدّد الرمز البرمجي التالي لون كل حرف في google.json من خلال الاطّلاع على موضعه في مجموعة أحرف ascii. في هذه الحالة، شفّرنا موضع الحرف مع بياناتنا.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

إزالة الأنماط

إذا كنت تريد إزالة أي أنماط مطبَّقة، أدخِل كائنًا فارغًا حرفيًا في طريقة setStyles().

// Remove custom styles.
map.data.setStyle({});

سيؤدي هذا الإجراء إلى إزالة أي أنماط مخصّصة حدّدتها، وسيتم عرض الميزات باستخدام الأنماط التلقائية. وإذا أردت عدم عرض الميزات بعد الآن، اضبِط السمة visible في السمة StyleOptions على false.

// Hide the Data layer.
map.data.setStyle({visible: false});

إلغاء الأنماط التلقائية

عادةً ما يتم تطبيق قواعد النمط على كل عنصر في طبقة البيانات. ومع ذلك، قد ترغب أحيانًا في تطبيق قواعد تصميم خاصة على ميزات معينة. على سبيل المثال، كطريقة لإبراز ميزة عند النقر.

ولتطبيق قواعد تصميم خاصة، استخدِم طريقة overrideStyle(). يتم تطبيق أي خصائص تغيرها باستخدام الإجراء overrideStyle() بالإضافة إلى الأنماط العامة المحدّدة مسبقًا في setStyle(). على سبيل المثال، ستغير التعليمة البرمجية أدناه لون تعبئة المضلّع عند النقر، ولكن لن تعين أي أنماط أخرى.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

عليك استدعاء الإجراء revertStyle() لإزالة جميع عمليات إلغاء الأنماط.

خيارات النمط

تعتمد الخيارات المتاحة لتصميم كل ميزة على نوع الميزة. على سبيل المثال، سيتم عرض fillColor على هندسات مضلّعات فقط، بينما يتم عرض icon على هندسية نقطية فقط. يمكنك الاطلاع على مزيد من المعلومات في المستندات المرجعية لـ StyleOptions.

متاح على كل الأشكال الهندسية

  • clickable: في حال true، ستتلقّى الميزة أحداث الماوس واللمس.
  • visible: إذا كانت القيمة true، ستكون الميزة مرئية.
  • zIndex: يتم عرض جميع العناصر على الخريطة بترتيب zIndex، مع عرض القيم الأعلى أمام العناصر ذات القيم الأقل. يتم عرض العلامات دائمًا أمام سلاسل الخطوط والمضلعات.

متوفّرة على الأشكال الهندسية للنقاط

  • cursor: يظهر مؤشر الماوس عند التمرير.
  • icon: رمز للعرض الهندسي للنقاط
  • shape: لتحديد خريطة الصور المستخدَمة لاكتشاف النتائج.
  • title: تمرير النص

متاح على الأشكال الهندسية الخط

  • strokeColor: لون الشطب يتم دعم جميع ألوان CSS3 باستثناء الألوان الموسعة المسماة.
  • strokeOpacity: تعتيم الحد الخارجي بين 0.0 و1.0
  • strokeWeight: عرض الحد الخارجي بالبكسل

متاح في الأشكال الهندسية المضلّعة

  • fillColor: لون التعبئة يتم دعم جميع ألوان CSS3 باستثناء الألوان الموسعة المسماة.
  • fillOpacity: تعتيم التعبئة بين 0.0 و1.0.
  • strokeColor: لون الشطب يتم دعم جميع ألوان CSS3 باستثناء الألوان الموسعة المسماة.
  • strokeOpacity: تعتيم الحد الخارجي بين 0.0 و1.0
  • strokeWeight: عرض الحد الخارجي بالبكسل

إضافة معالِجات الأحداث

تستجيب الميزات للأحداث، مثل mouseup أو mousedown. يمكنك إضافة مستمعين إلى الأحداث للسماح للمستخدمين بالتفاعل مع البيانات على الخريطة. في المثال أدناه، نضيف حدث تمرير الماوس، والذي يعرض معلومات حول الميزة أسفل مؤشر الماوس.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

أحداث طبقة البيانات

الأحداث التالية شائعة في جميع الميزات، بغض النظر عن نوعها الهندسي:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

يمكنك العثور على مزيد من المعلومات حول هذه الأحداث في المستندات المرجعية للفئة google.maps.data.

تغيير المظهر ديناميكيًا

يمكنك ضبط نمط طبقة البيانات عن طريق تمرير دالة تحسب نمط كل عنصر إلى طريقة google.maps.data.setStyle(). ويتم استدعاء هذه الدالة في كل مرة يتم فيها تحديث خصائص الميزة.

في المثال أدناه، أضفنا أداة معالجة حدث للحدث click الذي يعدّل سمة isColorful للميزة. يتم تحديث تصميم الميزة ليعكس التغيير فور تعيين الخاصية.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});