GeoJSON verilerini Haritalar'a aktarma

Genel Bakış

Yerel veya uzak bir kaynaktan GeoJSON verilerini nasıl içe aktaracağınızı ve haritanızda nasıl görüntüleyeceğinizi öğrenin. Bu eğitimde, haritalara veri aktarmayla ilgili çeşitli teknikleri açıklamak için aşağıdaki harita kullanılmıştır.

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

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

Örneği Deneyin

Veri yükleniyor

Bu bölümde, Maps JavaScript API uygulamanızla aynı alan adından veya farklı bir alan adından 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ın yapılandırması bu tür bir isteğe izin veriyorsa kendi alanınız dışındaki bir alandan da veri isteyebilirsiniz. Bu izin için standart, kaynaklar arası kaynak paylaşımı (CORS) olarak adlandırılır. Bir alan, alan adları arası isteklere izin verdiyse yanıt üstbilgisinde aşağıdaki beyan bulunmalıdır:

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.

Bu tür bir alandan veri yükleme işlemi, aynı alandan JSON yükleme işlemiyle aynıdır:

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

JSONP isteme

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

JSONP isteğinde bulunmak için dokümanınızın başına script etiketi eklemek üzere createElement() kullanın.

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 genellikle callback() olarak adlandırılan başka bir komut dosyasına bağımsız değişken olarak iletir. Hedef alan, geri çağırma komut dosyası adını tanımlar. Bu ad, hedef URL'yi tarayıcıda yüklediğinizde sayfadaki ilk addır.

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

Geri arama komut dosyasını kodunuzda tanımlamanız gerekir:

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

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

Verilere stil uygulama

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

Daha fazla bilgi

  • GeoJSON, coğrafi verileri kodlamak için JSON'a (JavaScript Object Notation) dayalı, 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 alandaki sunucudan veri istemek için kullanılan bir iletişim yöntemidir.