طبقة بيانات

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
اختَر النظام الأساسي: Android iOS JavaScript

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

نظرة عامة

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

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

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;

تحميل 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;

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;
عرض مثال

جرّب عيّنة

نموذج 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]
          ]
        ]
      }
    }
  ]
}

بيانات الموقع الجغرافي للأسلوب JSONJSON

استخدِم الطريقة 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();
});