طبقة بيانات

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

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

نظرة عامة

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

باستخدام واجهة برمجة تطبيقات جافا سكريبت للخرائط، يمكنك ترميز خريطة بمجموعة متنوعة من التراكبات مثل المحدّدات والخطوط المتعددة والمضلعات، وما إلى ذلك. ويدمج كل من هذه التعليقات التوضيحية معلومات الأنماط مع بيانات الموقع. إنّ فئة 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. لاحظ أن كل مضلعًا تم تعيينه بنفس النمط.

// 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();
});