ייבוא נתוני 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 מספקת מאגר לנתונים גיאו-מרחביים שרירותיים (כולל 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(). הדומיין היעד מגדיר את שם הסקריפט של הקריאה החוזרת (callback), שהוא השם הראשון בדף כשמטענים את כתובת ה-URL של היעד בדפדפן.

לדוגמה, אפשר לטעון את הכתובת http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp בחלון הדפדפן כדי לראות שהשם של הקריאה החוזרת הוא eqfeed_callback.

צריך להגדיר את סקריפט ה-callback בקוד:

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

משתמשים בשיטה addGeoJson() כדי למקם במפה את נתוני GeoJSON שנותחו.

עיצוב הנתונים

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

מידע נוסף

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