Google地图将第二层添加为叠加层

Question

需要在当前图层（HYBRID或SATELITE）上方添加第二层，在点击以显示另一个图层2秒后，它会显示两个图层，但不会显示动画结束和SATELITE图层消失

   var wmsOptions = {
        alt: "Layer",
        getTileUrl: WMSGetTileUrl,
        isPng: false,
        maxZoom: 17,
        minZoom: 6,
        name: "Layer",
        tileSize: new google.maps.Size(256, 256),
        credit: 'яяя'
    };
    wmsMapType = new google.maps.ImageMapType(wmsOptions);
    map.mapTypes.set('cad', wmsMapType);

https://jsfiddle.net/qmcpyd5x/

如何同时显示两个图层，如下图所示？

Answer 1

您需要Overlay Map Type而不是Base Map Type

updated fiddle

代码段

var map;

function initialize() {
  var myLatLng = new google.maps.LatLng(50.402036, 30.532691);
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var wmsOptions = {
    alt: "Layer",
    getTileUrl: WMSGetTileUrl,
    isPng: false,
    maxZoom: 17,
    minZoom: 6,
    name: "Layer",
    tileSize: new google.maps.Size(256, 256),
    credit: 'яяя'
  };
  wmsMapType = new google.maps.ImageMapType(wmsOptions);
  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  map.overlayMapTypes.insertAt(
    0, wmsMapType);

  map.mapTypes.set('cad', wmsMapType);

  map.setOptions({
    mapTypeControlOptions: {
      mapTypeIds: [
        'roadmap', 'terrain', 'hybrid'
      ],
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    }
  });

}

function WMSGetTileUrl(coord, zoom) {
  var proj = map.getProjection();
  var zfactor = Math.pow(2, zoom);
  // get Long Lat coordinates
  var top = proj.fromPointToLatLng(new google.maps.Point(coord.x * 256 / zfactor, coord.y * 256 / zfactor));
  var bot = proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * 256 / zfactor, (coord.y + 1) * 256 / zfactor));

  //corrections for the slight shift of the SLP (mapserver)
  var deltaX = 0.0013;
  var deltaY = 0.00058;

  //create the Bounding box string
  var bbox = (top.lng() + deltaX) + "," +
    (bot.lat() + deltaY) + "," +
    (bot.lng() + deltaX) + "," +
    (top.lat() + deltaY);

  var bbox = degrees2meters(top.lng(), bot.lat()) + "," +
    degrees2meters(bot.lng(), top.lat());


  //base WMS URL
  var url = "http://212.26.144.110/geowebcache/service/wms?tiled=true&";
  url += "&REQUEST=GetMap"; //WMS operation
  url += "&SERVICE=WMS"; //WMS service
  url += "&VERSION=1.1.1"; //WMS version  
  url += "&LAYERS=" + "kadastr"; //WMS layers
  url += "&FORMAT=image/png"; //WMS format
  url += "&BGCOLOR=0xFFFFFF";
  url += "&TRANSPARENT=TRUE";
  //url += "&SRS=EPSG:4326";     //set WGS84 
  url += "&SRS=EPSG:900913"; //set WGS84 
  url += "&BBOX=" + bbox; // set bounding box
  url += "&WIDTH=256"; //tile size in google
  url += "&HEIGHT=256";

  return url;
}
var degrees2meters = function(lon, lat) {
  var x = lon * 20037508.34 / 180;
  var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
  y = y * 20037508.34 / 180;
  return [x, y]
}
initialize();

<script src="https://maps.googleapis.com/maps/api/js?language=en&libraries=drawing,geometry"></script>
<div id="map" style="width: 500px; height: 300px">
</div>