طبقة بيانات

اختيار النظام الأساسي: 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 }, // 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,
    ]),
  });
}

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