وارد کردن داده‌های GeoJSON به Maps

نمای کلی

با نحوه وارد کردن داده‌های GeoJSON از منبع محلی یا راه دور و نمایش آن در نقشه آشنا شوید. این آموزش از نقشه زیر برای نشان دادن روش‌های مختلف وارد کردن داده‌ها به نقشه‌ها استفاده می‌کند.

بخش زیر کل کدی را که برای ایجاد نقشه در این آموزش نیاز دارید نمایش می‌دهد.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 2,
    center: new google.maps.LatLng(2.8, -187.3),
    mapTypeId: "terrain",
  });

  // Create a <script> tag and set the USGS URL as the source.
  const script = document.createElement("script");

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src =
    "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
const eqfeed_callback = function (results: any) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

declare global {
  interface Window {
    initMap: () => void;
    eqfeed_callback: (results: any) => void;
  }
}
window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 2,
    center: new google.maps.LatLng(2.8, -187.3),
    mapTypeId: "terrain",
  });

  // Create a <script> tag and set the USGS URL as the source.
  const script = document.createElement("script");

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src =
    "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
const eqfeed_callback = function (results) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML

<html>
  <head>
    <title>Earthquake Markers</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

درحال بار کردن داده

این بخش به شما نشان می‌دهد که چگونه داده‌ها را از همان دامنه برنامه Maps JavaScript API یا از دامنه دیگری بار کنید.

درحال بار کردن داده از همان دامنه

لایه داده‌های Google Maps محفظه‌ای برای داده‌های زمین‌مکانی دلخواه (ازجمله GeoJSON) ارائه می‌دهد. اگر داده‌هایتان در فایلی میزبانی می‌شود که در همان دامنه برنامه Maps JavaScript API شما قرار دارد، می‌توانید آن را بااستفاده از روش map.data.loadGeoJson() بار کنید. فایل باید در همان دامنه باشد، اما می‌توانید آن را در زیردامنه دیگری میزبانی کنید. برای مثال، می‌توانید از www.example.com به files.example.com درخواست ارسال کنید.

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

درحال بار کردن داده‌ها در دامنه‌ها

همچنین می‌توانید از دامنه‌ای غیراز دامنه خودتان درخواست داده کنید، اگر پیکربندی دامنه چنین درخواستی را مجاز کند. استاندارد این اجازه هم‌رسانی منبع میان‌مبدئی (CORS) نامیده می‌شود. اگر دامنه‌ای درخواست‌های بین‌دامنه‌ای را مجاز کرده باشد، سرایند پاسخ آن باید شامل اعلامیه زیر باشد:

Access-Control-Allow-Origin: *

از ابزارهای توسعه‌دهنده Chrome (DevTools) استفاده کنید تا ببینید آیا دامنه‌ای CORS را فعال کرده است یا نه.

بار کردن داده از چنین دامنه‌ای مانند بار کردن JSON از همان دامنه است:

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

درخواست JSONP

دامنه هدف باید از درخواست‌های JSONP پشتیبانی کند تا بتواند از این تکنیک استفاده کند.

برای درخواست JSONP، از createElement() برای افزودن برچسب script به سربرگ سندتان استفاده کنید.

var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);

وقتی اسکریپت اجرا می‌شود، دامنه هدف داده‌ها را به‌عنوان آرگومان به اسکریپت دیگری که معمولاً callback() نام دارد ارسال می‌کند. دامنه هدف، نام اسکریپت فراخوانی را تعریف می‌کند که اولین نام در صفحه هنگام بار کردن نشانی وب هدف در مرورگر است.

برای مثال، http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp را در پنجره مرورگرتان بار کنید تا نام فراخوانی برگشتی به‌صورت eqfeed_callback نشان داده شود.

باید اسکریپت فراخوانی را در کدتان تعریف کنید:

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

از روش addGeoJson() برای قرار دادن داده‌های GeoJSON تجزیه‌شده روی نقشه استفاده کنید.

وارد کردن اشیاء هندسی GeoJSON

روش map.data.addGeoJson() به GeoJSON تجزیه‌شده Feature یا شیء FeatureCollection نیاز دارد. این ابزار اشیای هندسی GeoJSON مستقل (Point،‏ MultiPoint،‏ LineString،‏ MultiLineString،‏ Polygon،‏ MultiPolygon، یا GeometryCollection) را مستقیماً نمی‌پذیرد.

اگر منبع داده یا پاسخ میانای برنامه‌سازی کاربردی شما یک شیء هندسی GeoJSON مستقل را بدون پوشاننده سطح بالای "type": "Feature" برمی‌گرداند، باید آن را قبل‌از فراخوانی map.data.addGeoJson() در یک شیء Feature بپوشانید.

برای مثال، اگر هندسه (مثل Polygon) یک شیء جاوا اسکریپت تجزیه‌شده است، آن را در یک شیء Feature قرار دهید:

const polygonGeometry = {
  type: "Polygon",
  coordinates: [
    [
      [-78.45, 35.82],
      [-78.41, 35.73],
      [-78.28, 35.66],
      [-78.45, 35.82],
    ],
  ],
};

const geoJsonFeature = {
  type: "Feature",
  geometry: polygonGeometry,
};

map.data.addGeoJson(geoJsonFeature);

اگر هندسه به‌صورت رشته‌ای با قالب JSON برگردانده شود (برای مثال، فیلد polygon که توسط هشدار آب‌وهوا یا پاسخ مرز برگردانده می‌شود)، می‌توانید قبل‌از تجزیه آن با JSON.parse()، یک سرصفحه به ابتدا و یک پاصفحه به انتهای آن اضافه کنید تا یک GeoJSON Feature معتبر تشکیل شود:

const geojson_header = "{\"type\":\"Feature\", \"geometry\": ";
const geojson_footer = "}";

map.data.addGeoJson(
    JSON.parse(geojson_header + polygon + geojson_footer));

برای اطلاعات بیشتر درباره کار با هندسه‌ها و چندضلعی‌ها در لایه «داده»، راهنمای توسعه‌دهنده لایه «داده» را ببینید.

سبک‌بندی داده‌ها

با افزودن داده‌های GeoJSON به شیء Map می‌توانید ظاهر داده‌هایتان را تغییر دهید. برای اطلاعات بیشتر درباره سبک‌بندی داده‌ها، راهنمای توسعه‌دهنده را بخوانید.

بیشتر بدانید

  • GeoJSON قالب باز پرکاربردی برای کدگذاری داده‌های جغرافیایی است که براساس JSON (نشان‌گذاری شیء جاوا اسکریپت) است. ابزارها و روش‌های جاوا اسکریپت که برای داده‌های JSON طراحی شده‌اند با GeoJSON نیز کار می‌کنند. برای اطلاعات بیشتر، راهنمای توسعه‌دهنده را بخوانید.
  • JSONP مخفف JSON padded است. این روش ارتباطی در برنامه‌های جاوا اسکریپت که در مرورگرهای وب اجرا می‌شوند استفاده می‌شود تا داده‌ها را از سروری در دامنه‌ای دیگر درخواست کند.