Jquery 如何指定一个“;主动的;单张地图的区域?
请考虑: 我有一个map div,可以在页面加载时扩展到全尺寸,还有一个半透明的div覆盖了它的底部。在美学上,我真的很喜欢底部div与后面的贴图的外观,但我需要使其成为透明div未覆盖的区域是“活动”区域 也就是说,当地图计算标记和多边形的边界并设置其视图时,它计算的是该暴露区域,而不是整个地图本身。人们似乎认为这是可能的,但我正在努力实现 小提琴上的代码如下:Jquery 如何指定一个“;主动的;单张地图的区域?,jquery,openstreetmap,leaflet,Jquery,Openstreetmap,Leaflet,请考虑: 我有一个map div,可以在页面加载时扩展到全尺寸,还有一个半透明的div覆盖了它的底部。在美学上,我真的很喜欢底部div与后面的贴图的外观,但我需要使其成为透明div未覆盖的区域是“活动”区域 也就是说,当地图计算标记和多边形的边界并设置其视图时,它计算的是该暴露区域,而不是整个地图本身。人们似乎认为这是可能的,但我正在努力实现 小提琴上的代码如下: // JavaScript var map = L.map('map', { center: [51.505, -0.09], zo
// 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());
xxx
多亏了传单频道的@moiner,我被引导到这个Github问题线程,特别是以下评论:
它定义用于偏移地图中心的混合:
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);
这对我很有效
<!-- HTML --->
<!DOCTYPE html>
<body>
<div id="header"></div>
<div id="map"></div>
<div id="otherstuff">xxx</div>
</body>
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);