لایه داده

پلتفرم را انتخاب کنید: Android iOS JavaScript

لایه Google Maps Data محفظه ای برای داده های مکانی دلخواه فراهم می کند. می توانید از لایه داده برای ذخیره داده های سفارشی خود یا نمایش داده های GeoJSON بر روی نقشه گوگل استفاده کنید.

بررسی اجمالی

برای کسب اطلاعات بیشتر در مورد لایه داده، این ویدیوی DevBytes را تماشا کنید.

با Maps JavaScript API می‌توانید نقشه را با پوشش‌های مختلفی مانند نشانگرها، چند خط‌ها، چندضلعی‌ها و غیره علامت‌گذاری کنید. کلاس google.maps.Data محفظه ای برای داده های مکانی دلخواه است. به جای اضافه کردن این همپوشانی ها، می توانید از لایه داده برای اضافه کردن داده های جغرافیایی دلخواه به نقشه خود استفاده کنید. اگر آن داده ها حاوی هندسه هایی مانند نقاط، خطوط یا چند ضلعی باشند، API به طور پیش فرض این ها را به عنوان نشانگر، چند خط و چند ضلعی نمایش می دهد. می‌توانید به این ویژگی‌ها مانند یک همپوشانی معمولی استایل دهید، یا قوانین استایل را بر اساس سایر ویژگی‌های موجود در مجموعه داده‌هایتان اعمال کنید.

کلاس 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

جاوا اسکریپت

// 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 را تنها در یک خط کد به نقشه گوگل اضافه کنید.

map.data.loadGeoJson('google.json');

هر نقشه دارای یک شی map.data است که به عنوان یک لایه داده برای داده های مکانی دلخواه از جمله GeoJSON عمل می کند. می توانید با فراخوانی متد loadGeoJSON() شی data ، یک فایل GeoJSON را بارگیری و نمایش دهید. مثال زیر نحوه اضافه کردن نقشه و بارگیری داده های خارجی 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

جاوا اسکریپت

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
مشاهده نمونه

Sample را امتحان کنید

نمونه 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'
});

اطلاعات بیشتر در مورد ترکیب‌های سبک/ویژگی معتبر را می‌توانید در گزینه‌های سبک پیدا کنید.

در زیر نمونه ای از تنظیم رنگ stroke و fill برای چندین ویژگی با استفاده از یک شیء 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 : کدورت stroke بین 0.0 و 1.0.
  • strokeWeight : عرض ضربه به پیکسل.

در هندسه های چند ضلعی موجود است

  • fillColor : رنگ پر. همه رنگ‌های CSS3 به جز رنگ‌های با نام توسعه‌یافته پشتیبانی می‌شوند.
  • fillOpacity : تیرگی پر بین 0.0 و 1.0.
  • strokeColor : رنگ stroke. همه رنگ‌های CSS3 به جز رنگ‌های با نام توسعه‌یافته پشتیبانی می‌شوند.
  • strokeOpacity : کدورت stroke بین 0.0 و 1.0.
  • strokeWeight : عرض ضربه به پیکسل.

اضافه کردن رویداد Handlers

ویژگی‌ها به رویدادها واکنش نشان می‌دهند، مانند 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();
});