وارد کردن داده‌های 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: *

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

بار کردن داده از چنین دامنه‌ای مانند بار کردن 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() به شیء Feature یا FeatureCollection تجزیه‌شده GeoJSON نیاز دارد. این سرویس اشیای هندسی GeoJSON مستقل (Point،‏ MultiPoint،‏ LineString،‏ MultiLineString،‏ Polygon، MultiPolygon، یا GeometryCollection) را مستقیماً نمی‌پذیرد.

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

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

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

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

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

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

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

بیشتر بدانید

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