طبقة بيانات

اختيار النظام الأساسي: نظام التشغيل 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');
});

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

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

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