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

نمای کلی

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

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

تایپ اسکریپت 

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;
index.ts

جاوا اسکریپت 

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;
index.js

سی‌اس‌اس 

/* 
 * 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;
}

style.css

اچ‌تی‌ام‌ال 

<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>
index.html

نمونه را امتحان کنید

بارگیری داده‌ها

این بخش به شما نشان می‌دهد که چگونه داده‌ها را از همان دامنه‌ای که برنامه Maps JavaScript API شما در آن قرار دارد، یا از دامنه‌ای متفاوت بارگذاری کنید.

بارگیری داده‌ها از همان دامنه

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

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

بارگذاری داده‌ها در دامنه‌ها

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

Access-Control-Allow-Origin: *

برای اینکه بفهمید آیا یک دامنه CORS را فعال کرده است یا خیر، از ابزارهای توسعه‌دهندگان کروم (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() نام دارد، ارسال می‌کند. دامنه هدف، نام اسکریپت callback را تعریف می‌کند که اولین نامی است که هنگام بارگذاری URL هدف در مرورگر، در صفحه نمایش داده می‌شود.

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

شما باید اسکریپت فراخوانی (callback script) را در کد خود تعریف کنید:

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

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

استایل‌دهی به داده‌ها

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

بیشتر بدانید

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