将NOAA图表与谷歌地图一起使用

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/说您可以使用允许通道参数的客户端 ID。我没有客户端 ID，但我有 API 密钥。有没有办法获取客户端 ID？或者有没有办法将我的 API 密钥与 NOAA 切片服务结合使用？如果我按原样使用该 URL，它会告诉我我的 URL 无权与该客户端 ID 一起使用。

Answer 1

磁贴不需要用于加载Google Maps Javascript API的clientID。 如果您有自己的密钥，则应该允许您通过Google Maps Javascript API v3加载NOAA磁贴。

概念验证小提琴

代码片段：

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>