将 NOAA 图表与 Google 地图结合使用

Question

在此页面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

https://developers.google.com/maps/documentation/javascript/ 上的 Google 文档说您可以使用允许通道参数的客户端 ID。我没有客户端 ID，我有 API 密钥。有没有办法获取客户 ID？或者有没有办法将我的 API 密钥与 NOAA 磁贴服务结合使用？如果我按原样使用该 URL，它会告诉我我的 URL 无权与该客户端 ID 一起使用。

Answer 1

图块不需要用于加载 Google Maps Javascript API 的 clientID。如果您有自己的密钥，那么您应该可以通过 Google Maps Javascript API v3 加载 NOAA 磁贴。

proof of concept fiddle

代码 sn-p：

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>