ייבוא נתוני GeoJSON למפות Google

סקירה כללית

איך מייבאים נתוני 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;
index.ts

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

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

style.css

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

דוגמה לניסיון

בתהליך טעינת נתונים

בקטע הזה מוסבר איך לטעון נתונים מאותו דומיין כמו האפליקציה של Maps JavaScript API, או מדומיין אחר.

טעינת נתונים מאותו דומיין

שכבת הנתונים של Google Maps מספקת מאגר לנתונים גיאוספציאליים שרירותיים (כולל GeoJSON). אם הנתונים שלכם נמצאים בקובץ שמתארח באותו דומיין שבו מתארחת האפליקציה שלכם ב-Maps JavaScript API, אתם יכולים לטעון אותם באמצעות השיטה map.data.loadGeoJson(). הקובץ צריך להיות באותו דומיין, אבל אפשר לארח אותו בתת-דומיין אחר. לדוגמה, אפשר לשלוח בקשה אל files.example.com מ-www.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. מידע נוסף על עיצוב הנתונים זמין במדריך למפתחים.

מידע נוסף

  • ‫GeoJSON הוא פורמט פתוח שנמצא בשימוש נרחב לקידוד נתונים גיאוגרפיים, והוא מבוסס על JSON‏ (JavaScript Object Notation). כלים ושיטות של JavaScript שמיועדים לנתוני JSON פועלים גם עם GeoJSON. מידע נוסף זמין במדריך למפתחים.
  • ‫JSONP מייצג JSON עם ריפוד. זו שיטת תקשורת שמשמשת בתוכנות JavaScript שפועלות בדפדפני אינטרנט, כדי לבקש נתונים משרת בדומיין אחר.