Как указать «активную» область карты листовка?

Пожалуйста, учитывайте: http://jsfiddle.net/msNs5/3/Как указать «активную» область карты листовка?

У меня есть div, который расширяется до полного размера при загрузке страницы и еще один полупрозрачный div, который покрывает его нижнюю часть. Эстетично, мне очень нравится, как нижний div выглядит с картой за ним, но мне нужно сделать так, чтобы область, которая не покрыта прозрачным div, является «активной» областью.

I.E. когда карта вычисляет границы для маркеров и многоугольников и устанавливает ее вид, она вычисляет этот экспоненциальный регион вместо всей самой карты. Кажется, люди думают, что это возможно, но я борюсь с фактической реализацией.

код из скрипки ниже:

// 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>

источник

2013-03-18 aphelionz

Благодаря @mourner на канале #leaflet, я был направлен в этом 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-18 18:14:23 aphelionz

Как указать «активную» область карты листовка?

ответ

Смежные вопросы