Использование диаграмм NOAA с Google Maps - PullRequest
Новая
       18

Использование диаграмм NOAA с Google Maps

0 голосов
/ 29 декабря 2018

На этой странице http://tileservice.charts.noaa.gov/tileset.html#13003_1-gmaps-code есть пример кода для использования.Этот URL-адрес используется в качестве источника сценария: maps.google.com/maps/api/js?client=gme-noaa&channel=NOS.OCS.MCD.ChartTileService

Документация Google для этого на https://developers.google.com/maps/documentation/javascript/ говорит, что вы можете использовать идентификатор клиента, который учитывает параметр канала.У меня нет идентификатора клиента, у меня есть ключ API.Есть ли способ получить идентификатор клиента?Или есть способ использовать мой ключ API вместе со службой плиток NOAA?Если я использую этот URL-адрес как есть, он говорит, что мой URL-адрес не разрешен для использования с этим идентификатором клиента.

1 Ответ

0 голосов
/ 30 декабря 2018

Для плиток не требуется идентификатор клиента, который используется для загрузки API JavaScript Карт Google.Если у вас есть свой собственный ключ, это позволит вам загружать фрагменты NOAA через API JavaScript Карт Google v3.

подтверждение концепции скрипта

кодфрагмент: 

function init() {

  // var metadata = read_metadata();
  var metadata = {
    "profile": "global-mercator",
    "attribution": "NOAA",
    "description": null,
    "format": "png",
    "basename": "13003_1",
    "minzoom": 3,
    "maxzoom": 10,
    "tilejson": "2.0.0",
    "name": "13003_1",
    "bounds": [-77.03047059346102,
      34.13783585089608, -64.93734162555232,
      45.79693682025801
    ],
    "version": "1",
    "scheme": "xyz",
    "type": "overlay"
  };
  var mapMinZoom = metadata.minzoom;
  var mapMaxZoom = metadata.maxzoom;

  // Compensate for dateline 
  if (metadata.bounds[0] > metadata.bounds[3]) {
    metadata.bounds[0] = metadata.bounds[0] - 360;
  }

  var mapBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(metadata.bounds[1], metadata.bounds[0]), //south west
    new google.maps.LatLng(metadata.bounds[3], metadata.bounds[2])); //north east

  var opts = {
    streetViewControl: false,
    tilt: 0,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: mapBounds.getCenter(),
    zoom: 7
  }

  var map = new google.maps.Map(document.getElementById("map"), opts);

  // https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay
  var imageMapType = new google.maps.ImageMapType({

    getTileUrl: function(coord, zoom) {

      var z2 = Math.pow(2, zoom);
      var size = 256 / z2;
      var x = coord.x;
      if (coord.x < 0) {
        x = coord.x + z2;
      }

      var proj = map.getProjection();
      var tileBounds = new google.maps.LatLngBounds(
        proj.fromPointToLatLng(new google.maps.Point(x * size, (coord.y + 1) * size)),
        proj.fromPointToLatLng(new google.maps.Point((x + 1) * size, coord.y * size))
      );

      if (!mapBounds.intersects(tileBounds) || zoom < mapMinZoom || zoom > mapMaxZoom) return null;

      var tiles = '//tileservice.charts.noaa.gov/tiles/13003_1/{z}/{x}/{y}.png';
      tiles = tiles.replace('{z}', zoom).replace('{x}', coord.x).replace('{y}', coord.y);

      console.log(tiles);

      return tiles;
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    minZoom: mapMinZoom,
    maxZoom: mapMaxZoom,
    opacity: 1.0,
    name: 'Tiles'
  });

  map.overlayMapTypes.push(imageMapType);
}
google.maps.event.addDomListener(window, 'load', init);

function read_text(url, mime) {
  var request = new XMLHttpRequest();
  request.open('GET', url, false);
  if (request.overrideMimeType) {
    request.overrideMimeType(mime);
  }
  try {
    request.send();
    if (request.status != 0) {
      console.log('read_text', request.status, request.responseText);
    }
  } catch (e) {
    console.log('read_text', e.code);
  }
  return request.responseText;
}

function read_metadata() {
  var tilemap_txt = read_text("metadata.json", "application/json");
  if (tilemap_txt == null) {
    error('Cannot read tilemap.json');
    return null;
  }
  return JSON.parse(tilemap_txt);
}
html,
body,
#map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
...