谷歌地图 API 3 + WMS答案

【问题标题】：Google Map API 3 + WMS谷歌地图 API 3 + WMS
【发布时间】：2012-01-11 08:30:39
【问题描述】：

谁能给我最好的主意，如何将 WMS 图层放在 Google 地图上，我有这么多图层和这么多样式。我在 StackOverflow 上研究了很多 Q 和 A，但我没有明白如何管理多个样式和图层。我想输入我的 JQuery 代码。

【问题讨论】：

标签： javascript jquery google-maps-api-3 wms

【解决方案1】：

<!DOCTYPE html>
<html>
  <head>
    <title>WMS and Google Maps</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* 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>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var EXTENT = [-Math.PI * 6378137, Math.PI * 6378137];

      function xyzToBounds(x, y, z) {
        var tileSize = (EXTENT[1] * 2) / Math.pow(2, z);
        var minx = EXTENT[0] + x * tileSize;
        var maxx = EXTENT[0] + (x + 1) * tileSize;
        // remember y origin starts at top
        var miny = EXTENT[1] - (y + 1) * tileSize;
        var maxy = EXTENT[1] - y * tileSize;
        return [minx, miny, maxx, maxy];
      }

      var getTileUrl = function(coordinates, zoom) {
        return (
          "https://www.mrlc.gov/geoserver/NLCD_Land_Cover/wms?" +
          "&REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1" +
          "&LAYERS=mrlc_display%3ANLCD_2016_Land_Cover_L48" +
          "&FORMAT=image%2Fpng" +
          "&SRS=EPSG:3857&WIDTH=256&HEIGHT=256" +
          "&BBOX=" +
          xyzToBounds(coordinates.x, coordinates.y, zoom).join(",")
        );
      };

      function initMap() {
        var map = new google.maps.Map(document.getElementById("map"), {
          zoom: 12,
          center: { lat: 37.783, lng: -122.403 }
        });

        var landcover = new google.maps.ImageMapType({
          getTileUrl: getTileUrl,
          name: "Landcover",
          alt: "National Land Cover Database 2016",
          minZoom: 0,
          maxZoom: 19,
          opacity: 0.75,
        });
        map.overlayMapTypes.push(landcover);
      }

    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
    </script>
  </body>
</html>

您可以在此处阅读详细信息：https://medium.com/@justinwp/wms-layer-on-google-maps-1087a43d7556

【讨论】：

【解决方案2】：

这里有一个很好的例子：http://www.sumbera.com/lab/GoogleV3/tiledWMSoverlayGoogleV3.htm

这里有 2 种层：

位于底部的基础层
覆盖在所有其他层之上的半透明层

（注意：在上面的示例中，他们仅将 WMS 用于案例 2，但您当然也可以将其用于案例 1，因为两者的接口（对象 google.maps.ImageMapType）是相同的）

基本上，添加您使用的“基础层”：

map.mapTypes.set('OSM', new google.maps.ImageMapType({ ... }));

要添加您使用的覆盖层：

map.overlayMapTypes.push(new google.maps.ImageMapType({ ... }));

要添加图层到地图类型控件，请在创建地图时使用选项：

mapTypeControlOptions: {
    mapTypeIds: [
        'OSM', 
        google.maps.MapTypeId.ROADMAP, 
        google.maps.MapTypeId.SATELLITE, 
        google.maps.MapTypeId.HYBRID, 
        google.maps.MapTypeId.TERRAIN
    ],
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

上面的例子很好地说明了这一点。至于 WMS 图层的样式，这很复杂，我也输入了a question about this here。祝你好运！

【讨论】：