Google карты добавить второй слой в качестве наложения

Question

нужно добавить второй слой выше текущего слоя (HYBRID или СПУТНИК), после нажатия, чтобы показать еще один слой в течение 2 секунд он показывает оба слоя, но чем анимация заканчивается, и пропадает слой СПУТНИК

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>