2

考慮してください：http：//jsfiddle.net/msNs5/3/

ページの読み込み時にフルサイズに拡張するマップdivと、その下部をカバーする別の半透明のdivがあります。美的には、下のdivが背後のマップでどのように見えるかが本当に気に入っていますが、透明なdivでカバーされていない領域が「アクティブ」領域になるようにする必要があります。

IEは、マップがマーカーとポリゴンの境界を計算してそのビューを設定すると、マップ全体ではなく、その露出領域に計算されます。人々はこれが可能だと思っているようですが、私は実際の実装に苦労しています。

フィドルからのコードは以下のとおりです。

// JavaScript
var map = L.map('map', { center: [51.505, -0.09], zoom: 13 });
osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {});
map.addLayer(osm);

function initMap() {
  $('#map').css({"height": $(window).height() + "px"});
  map.setView(map.getCenter(),map.getZoom());
}

var id;
$(window).resize(function() {
  clearTimeout(id);

  id = setTimeout(initMap, 500);
});

$('#map').css({"height": $(window).height() + "px"});
  map.setView(map.getCenter(),map.getZoom());

/* CSS */
#map { position: fixed; z-index: -1; width: 100%; }
#header { height: 40px; background: black; }
#otherstuff { position: fixed; bottom: 0px; width: 100%; background-color: rgba(255,255,255,0.6); height: 30%; }

<!-- HTML --->
<!DOCTYPE html>
<body>
    <div id="header"></div>
    <div id="map"></div>

    <div id="otherstuff">xxx</div>
</body>
4

1 に答える 1

2

#leafletチャネルの@mournerのおかげで、このGithubの問題のスレッド、特にこのコメントに誘導されました。

https://github.com/Leaflet/Leaflet/issues/859#issuecomment-11436202

マップの中心をオフセットするためのミックスインを定義します。

MapCenterOffsetMixin = {
    UIOffset: [550, 0], // x, y
    getBounds: function(){
        var a=this.getPixelBounds(),
            b=this.unproject(new L.Point(a.min.x+this.UIOffset[0],a.max.y+this.UIOffset[1]), this._zoom,!0),
            c=this.unproject(new L.Point(a.max.x,a.min.y),this._zoom,!0);
            return new L.LatLngBounds(b,c)
    },
    _latLngToNewLayerPoint: function (latlng, newZoom, newCenter) {
        var targetPoint = this.project(newCenter, newCenter).subtract([this.UIOffset[0]/2, this.UIOffset[1]/2]),
            newCenter = this.unproject(targetPoint, newZoom);
        var topLeft = this._getNewTopLeftPoint(newCenter, newZoom).add(this._getMapPanePos());
        return this.project(latlng, newZoom)._subtract(topLeft);
    },
    _getCenterLayerPoint: function () {
        return this.containerPointToLayerPoint(this.getSize().divideBy(2).add([this.UIOffset[0]/2, this.UIOffset[1]/2]));
    },
    _resetView: function (a, b, c, d) {
        var e = this._zoom !== b;
        // Change the center
        var targetPoint = this.project(a, b).subtract([this.UIOffset[0] / 2, this.UIOffset[1]/2]),
            a = this.unproject(targetPoint, b);
        d || (this.fire("movestart"), e && this.fire("zoomstart")), this._zoom = b, this._initialTopLeftPoint = this._getNewTopLeftPoint(a);
        if (!c) L.DomUtil.setPosition(this._mapPane, new L.Point(0, 0));
        else {
            var f = L.DomUtil.getPosition(this._mapPane);
            this._initialTopLeftPoint._add(f)
        }
        this._tileLayersToLoad = this._tileLayersNum, this.fire("viewreset", {
            hard: !c
        }), this.fire("move"), (e || d) && this.fire("zoomend"), this.fire("moveend"), this._loaded || (this._loaded = !0, this.fire("load"))
    }
}

L.Map.include(MapCenterOffsetMixin);

これは私にとって非常にうまくいきました。

于 2013-03-18T18:14:23.390 に答える