GeoJSON Verilerini Haritalar'a Aktarma

Genel bakış

Yerel veya uzak kaynaktan GeoJSON verilerini içe aktarmayı ve haritanızda görüntülemeyi öğrenin. Bu eğiticide, haritalara veri aktarmaya yönelik çeşitli teknikleri göstermek için aşağıdaki harita kullanılmaktadır.

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

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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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ükleme

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ı alan adında barındırılan bir dosyadaysa map.data.loadGeoJson() yöntemini kullanarak yükleyebilirsiniz. Dosya aynı alanda olmalıdır ancak dosyayı farklı bir alt alanda barındırabilirsiniz. Örneğin, www.example.com adresinden files.example.com için bir istekte bulunabilirsiniz.

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 adınız dışındaki bir alandan da veri isteyebilirsiniz. Bu iznin standardı Kaynaklar arası kaynak paylaşımı (CORS) olarak adlandırılır. Bir alan, web alanları arası isteklere izin verdiyse yanıt başlığında aşağıdaki bildirim bulunmalıdır:

Access-Control-Allow-Origin: *

Bir alanda CORS'un etkinleştirilip etkinleştirilmediğini öğrenmek için Chrome Geliştirici Araçları'nı (Geliştirici Araçları) kullanın.

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

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

JSONP isteğinde bulunma

Bu tekniğin kullanılabilmesi için hedef alanın JSONP'ye yönelik istekleri desteklemesi gerekir.

JSONP isteğinde bulunmak için createElement() kullanarak dokümanınızın başına 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ığında hedef alan, verileri bağımsız değişken olarak genellikle callback() adlı başka bir komut dosyasına aktarır. Hedef alan, geri çağırma komut dosyası adını tanımlar. Bu ad, hedef URL'yi bir tarayıcıya yüklediğinizde sayfadaki ilk addır.

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

Geri çağırma komut dosyasını kodunuzda 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.

Verilerin stilini belirleme

Bir Harita nesnesine GeoJSON verileri ekleyerek verilerinizin görünümünü değiştirebilirsiniz. Verilerinizin stil özelliklerini ayarlama 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 - JavaScript Nesne Gösterimi) dayalı olarak yaygın olarak kullanılan bir açık biçimdir. JSON verileri için tasarlanan JavaScript araçları ve yöntemleri de GeoJSON ile ç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 bir sunucudan veri istemek için kullanılan bir iletişim yöntemidir.