นําเข้าข้อมูล 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() ไฟล์ต้องอยู่ในโดเมนเดียวกัน แต่คุณโฮสต์ไฟล์ในโดเมนย่อยอื่นได้ เช่น คุณสามารถส่งคำขอไปยัง 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() โดเมนเป้าหมายจะกำหนด ชื่อสคริปต์เรียกกลับ ซึ่งเป็นชื่อแรกในหน้าเมื่อคุณโหลด URL เป้าหมายในเบราว์เซอร์

ตัวอย่างเช่น โหลด http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp ในหน้าต่างเบราว์เซอร์เพื่อแสดงชื่อ Callback เป็น eqfeed_callback

คุณต้องกำหนดสคริปต์ 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 แบบสแตนด์อโลนโดยไม่มี Wrapper "type": "Feature" ระดับบนสุด คุณต้องรวมออบเจ็กต์ดังกล่าวไว้ในออบเจ็กต์ Feature ก่อนเรียกใช้ map.data.addGeoJson()

เช่น หากเรขาคณิต (เช่น Polygon) เป็นออบเจ็กต์ JavaScript ที่แยกวิเคราะห์แล้ว ให้ห่อหุ้มด้วยออบเจ็กต์ 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 ที่การตอบกลับการแจ้งเตือนสภาพอากาศหรือขอบเขตแสดงผล) คุณยังสามารถ เพิ่มส่วนหัวและส่วนท้ายเพื่อสร้าง GeoJSON Feature ที่ถูกต้องก่อน แยกวิเคราะห์ด้วย 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 Notation) เครื่องมือและวิธีการ JavaScript ที่ออกแบบมาสำหรับข้อมูล JSON จะใช้กับ GeoJSON ได้ด้วย อ่านข้อมูลเพิ่มเติมได้ในคู่มือสำหรับนักพัฒนาซอฟต์แวร์
  • JSONP ย่อมาจาก JSON ที่มีส่วนเติม เป็นวิธีการสื่อสาร ที่ใช้ในโปรแกรม JavaScript ที่ทำงานในเว็บเบราว์เซอร์ เพื่อขอข้อมูลจาก เซิร์ฟเวอร์ในโดเมนอื่น