javascript - 使用 Leaflet 在 basemap 之上创建一个固定的矩形层

Question

我已经设法在基础 map 上添加了一个图层，它看起来像这样:我通过使用 jQuery - width、height 和 overflow:hidden 直接修改样式来制作这个矩形。我不确定这样做是否正确，请告知是否有更好的方法。

我需要做的是当我通过鼠标拖动平移 map 时，我希望顶部的矩形图层保持在同一个位置但内容要分别更改，以便该矩形看起来像 basemap 顶部的 mask 。如我所见，

正在应用 Leaflet 中的平移

-webkit-transform: translate3d(185px, 178px, 0) (我在 Chrome 中)所以设置 top: 0 和 left: 0 没有帮助，矩形在平移时随着 map 移动，就像它粘在 map 上一样。

我相信有人处理过同样的任务，所以请告诉我。

更新:我添加了一个 fiddle这更好地说明了我的问题:

Answer 1

建议#1

您可以创建一个clip 蒙版并在您的平移的相反方向上更改其rect..

类似于 http://jsfiddle.net/gaby/dgWZk/23/

var overlay = {
    top: 50,
    left: 50,
    width: 200,
    height: 200
}

map.on('move', repositionMask) ;

map.fire('move');


function repositionMask() {
    var po = map.getPixelOrigin(),
        pb = map.getPixelBounds(),
        offset = map.getPixelOrigin().subtract(map.getPixelBounds().min);

    $(layer02._container).css({
        clip: 'rect(' + (overlay.top - offset.y) + 'px,' + (overlay.left + overlay.width - offset.x) + 'px,' + (overlay.top + overlay.height - offset.y) + 'px,' + (overlay.left - offset.x) + 'px)'
    });
}

---

一个问题是传单方法在惯性平移时不会公开动画变量，所以我们还不能模仿它..所以我禁用了 map 的inertia..

放大/缩小时的另一个问题是，在动画期间 mask 也会放大/缩小(但在动画完成后得到修复，或者您可以设置 zoomAnimation:false 还有)

---

建议#2

另一种解决方案是创建第二张 map 并对其进行叠加/同步

类似于http://jsfiddle.net/gaby/dgWZk/24/

<div id="container">
    <div id="map"></div>
    <div id="overlay"></div>
</div>

与

#container {
    position:relative;
    height:500px;
}
#map {
    height: 500px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
#overlay {
    width: 200px;
    height: 200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-200px;
    outline:1px solid green;
    pointer-events:none;
}

和

var map = new L.map('map',{
    inertia:false
}).setView([51.505, -0.09], 13);
var overlay = new L.map('overlay', {
    zoomControl: false,
    inertia: false,
    keyboard: false,
    dragging: false,
    scrollWheelZoom: false,
    attributionControl:false,
    zoomAnimation:false
}).setView([51.505, -0.09], 13);
var layer01 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);


var layer02 = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg').addTo(overlay);


map.on('move', function () {
    var offset = overlay._getNewTopLeftPoint(map.getCenter()).subtract(overlay._getTopLeftPoint()).subtract([100,100]);
    overlay.fire('movestart');
    overlay._rawPanBy(offset);
    overlay.fire('move');
    overlay.fire('moveend');
}).on('zoomend', function () {
    overlay.setView(map.getCenter(), map.getZoom(), true);
    map.fire('move');
});

$(window).resize(function () {
    overlay.setView(map.getCenter(), map.getZoom());
    map.fire('move');
});
map.fire('move');