طبقة البيانات

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

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

نظرة عامة

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

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

تتيح لك فئة google.maps.Data إجراء ما يلي:

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

رسم مضلّع

تتعامل فئة 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();
});