Google maps api 3 带有谷歌地图API的地图滑动工具

我试图建立并排地图刷工具一样。我的UI工作正常。我需要有关更改地图图层的帮助。我通过这个函数

ee.data.getMapId（params，callback）

从Earth Engine获取地图id和地图令牌。我正在使用它将我的

ImageMapType

构造为：

var DEFAULT_ZOOM = 5,
    MAX_ZOOM = 25,
    DEFAULT_CENTER = {
        lng: 102.93,
        lat: 16.4
    },
    // Map options
    mapOptions = {
        center: DEFAULT_CENTER,
        zoom: DEFAULT_ZOOM,
        maxZoom: MAX_ZOOM,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_CENTER
        },
        mapTypeId: 'terrain',
        fullscreenControl: true,
        fullscreenControlOptions: {
            position: google.maps.ControlPosition.TOP_LEFT
        },
        zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER
        }
    };

var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var leftLayer, rightLayer;

var getMapType = function (mapId, mapToken, name) {
    var eeMapOptions = {
        getTileUrl: function (tile, zoom) {
            var url = 'https://earthengine.googleapis.com/map/';
            url += [mapId, zoom, tile.x, tile.y].join('/');
            url += '?token=' + mapToken;
            return url;
        },
        tileSize: new google.maps.Size(256, 256),
        opacity: 1.0,
        name: name
    };
    return new google.maps.ImageMapType(eeMapOptions);
};

var loadMap = function () {
    // Left Layer
    leftLayer = getMapType(id, token, 'left');
    // Right Layer
    rightLayer = getMapType(id, token, 'right');
    map.overlayMapTypes.push(leftLayer);
    map.overlayMapTypes.push(rightLayer);
};

滑块是范围输入类型。HTML看起来像：

<div class="sbs">
    <div class="sbs-divider"></div>
    <input class="sbs-range" type="range" min="0" max="1" step="any" style="padding-right: 0; padding-left: 0; left: 0%;" />
</div>

我正在尝试将样式设置为左侧和右侧图层剪辑。如何在Google Maps API V3中做到这一点？还是有更好的方法？在此方面的任何帮助都将不胜感激

谢谢

看一看

我在OverlyMouseTarget窗格中使用了两个自定义覆盖，并用一个矩形剪辑覆盖。请参见地图源中的slider.js。它是可读的

var thumbSize = 42;
var padding = 0;
var sbsRange = $('.sbs-range')
.on('input change', function (event) {
    var _x = map.getDiv().clientWidth;
    var _y = map.getDiv().clientHeight;
    var nw = {x: 0, y: 0};
    var se = {x: _x, y: _y};
    var sliderValue = Number(event.target.value);
    var offset = (0.5 - sliderValue) * (2 * padding + thumbSize);
    var shift = _x * sliderValue + offset;
    $('.sbs-divider').css({left: shift + 'px'});
    var clipLeft = 'rect(' + [nw.y, offset, se.y, nw.x].join('px,') + 'px)';
    var clipRight = 'rect(' + [nw.y, se.x, se.y, offset].join('px,') + 'px)';
});