GeoJSON verilerini Haritalar'a aktarma

Genel Bakış

Yerel veya uzak bir kaynaktan GeoJSON verilerini içe aktarmayı ve haritanızda göstermeyi öğrenin. Bu eğitimde, haritalara veri aktarmak için kullanılan çeşitli teknikleri göstermek amacıyla aşağıdaki harita kullanılmıştır.

Aşağıdaki bölümde, bu eğitimde haritayı oluşturmak için gereken kodun tamamı gösterilmektedir.

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

Veri yükleniyor

Bu bölümde, Maps JavaScript API uygulamanızla aynı alandan veya farklı bir alandan nasıl veri yükleyeceğiniz gösterilmektedir.

Aynı alandan veri yükleme

Google Haritalar Veri Katmanı, rastgele coğrafi veriler (GeoJSON dahil) için bir kapsayıcı sağlar. Verileriniz, Maps JavaScript API uygulamanızla aynı alanda barındırılan bir dosyadaysa map.data.loadGeoJson() yöntemini kullanarak yükleyebilirsiniz. Dosya aynı alanda olmalıdır ancak farklı bir alt alanda barındırabilirsiniz. Örneğin, www.example.com adresinden files.example.com adresine istek gönderebilirsiniz.

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

Alanlar arasında veri yükleme

Alan yapılandırması izin veriyorsa kendi alanınız dışındaki bir alandan da veri isteyebilirsiniz. Bu iznin standardı, çapraz kaynaklı kaynak paylaşımı (CORS) olarak adlandırılır. Bir alan adı, alanlar arası isteklere izin veriyorsa yanıt başlığı aşağıdaki beyanı içermelidir:

Access-Control-Allow-Origin: *

Bir alanın CORS'u etkinleştirip etkinleştirmediğini öğrenmek için Chrome Geliştirici Araçları (DevTools)'nı kullanın.

Böyle bir alan adından veri yüklemek, aynı alan adından JSON yüklemekle aynıdır:

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

JSONP isteğinde bulunma

Bu tekniği kullanmak için hedef alanın JSONP isteklerini desteklemesi gerekir.

JSONP isteğinde bulunmak için createElement() kullanarak dokümanınızın başlığına bir script etiketi ekleyin.

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

Komut dosyası çalıştırıldığında hedef alan, verileri bağımsız değişken olarak başka bir komut dosyasına (genellikle callback() olarak adlandırılır) iletir. Hedef alan, geri çağırma komut dosyası adını tanımlar. Bu, hedef URL'yi bir tarayıcıda yüklediğinizde sayfadaki ilk addır.

Örneğin, geri çağırma adını eqfeed_callback olarak göstermek için tarayıcı pencerenizde http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp adresini yükleyin.

Kodunuzda geri çağırma komut dosyasını tanımlamanız gerekir:

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

Ayrıştırılmış GeoJSON verilerini haritaya yerleştirmek için addGeoJson() yöntemini kullanın.

GeoJSON geometri nesnelerini içe aktarma

map.data.addGeoJson() yöntemi, ayrıştırılmış bir GeoJSON Feature veya FeatureCollection nesnesi gerektirir. Bağımsız GeoJSON geometri nesnelerini (Point, MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon veya GeometryCollection) doğrudan kabul etmez.

Veri kaynağınız veya API yanıtınız, üst düzey "type": "Feature" sarmalayıcısı olmayan bağımsız bir GeoJSON geometri nesnesi döndürüyorsa map.data.addGeoJson() yöntemini çağırmadan önce bu nesneyi bir Feature nesnesine sarmalamanız gerekir.

Örneğin, geometri (ör. Polygon) ayrıştırılmış bir JavaScript nesnesiyse bunu bir Feature nesnesine sarmalayın:

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

Geometri, JSON biçimli bir dize olarak döndürülürse (ör. hava durumu uyarısı veya sınır yanıtı tarafından döndürülen polygon alanı), JSON.parse() ile ayrıştırmadan önce geçerli bir GeoJSON Feature oluşturmak için bir üstbilgi ve altbilgi de ekleyebilirsiniz:

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

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

Veri katmanında geometriler ve poligonlarla çalışma hakkında daha fazla bilgi için Veri Katmanı geliştirici kılavuzunu inceleyin.

Verileri biçimlendirme

Bir harita nesnesine GeoJSON verileri ekleyerek verilerinizin görünümünü değiştirebilirsiniz. Verilerinizi stillendirme hakkında daha fazla bilgi için geliştirici kılavuzunu okuyun.

Daha fazla bilgi

• GeoJSON, JSON'u (JavaScript Nesnesi Notasyonu) temel alan, coğrafi verileri kodlamak için yaygın olarak kullanılan açık bir biçimdir. JSON verileri için tasarlanmış JavaScript araçları ve yöntemleri GeoJSON ile de çalışır. Daha fazla bilgi için geliştirici kılavuzunu okuyun.
• JSONP, dolgulu JSON anlamına gelir. Web tarayıcılarında çalışan JavaScript programlarında, farklı bir alan adındaki sunucudan veri istemek için kullanılan bir iletişim yöntemidir.