带有 Google 地图 API 的地图滑动工具

Question

我正在尝试构建像这个这样的并排地图滑动工具。我的用户界面可以正常工作。我需要有关更改地图图层的帮助。我通过这个函数从 Earth Engine 获取地图 ID 和地图令牌

ee.data.getMapId(params, callback)

。我用它来构建我的

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>

附加到滑块的事件为：

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)';
});

我正在尝试将样式设置为左右图层剪辑。如何在 Google Maps API V3 中执行此操作？或者有更好的方法来做到这一点吗？对此的任何帮助将不胜感激。

谢谢！

Answer 1

看看https://maps.amsterdam.nl/slider

我在 OverlayMouseTarget 窗格中使用了两个自定义叠加层，并用矩形剪辑叠加层。请参阅地图源中的 slider.js。这是可读的。