Leaflet- 在不使用地图实例的情况下查找边界的缩放级别
Leaflet- Finding the Zoom Level Of Bounds Without Using a Map Instance
我想做什么:
我有点手忙脚乱,我需要能够 找到多个形状的传单缩放级别,而无需创建地图实例并使用 map.fitBounds()
在其周围移动.
我坚持的 2 种可能的解决方案:
1) 我尝试制作 mock/temp 地图以访问 map.fitBounds()
功能并模拟 map.fitBounds()
-但无法正常工作,因为地图需要实例化一个 div 容器。
2) 我一直在寻找以编程方式计算传单缩放比例的方法。
-我还没有找到任何关于如何做到这一点的资源。
如果您有任何策略可以帮助我将这些原始数据转换为他们的传单对应物,那将是非常棒的!!
您可以使用未附加到 DOM:
的元素创建 L.Map
实例
new L.Map(document.createElement('div'), {
'center': [0, 0],
'zoom': 0
});
问题是为了计算边界,负责的方法需要知道地图的大小。要获得大小,它将调用 L.Map
的 getSize
方法,但它总是 return {x:0, y:0}
的大小,因为地图的元素未附加到 DOM.您可以将 getSize
方法重写为 return 大小:
L.Map.include({
getSize: function () {
return new L.Point(400, 300);
}
});
var map = new L.Map(document.createElement('div'), {
'center': [0, 0],
'zoom': 0
});
console.log(map.getSize()); // o.Point {x: 400, y: 300}
现在您可以使用 L.LatLngBounds
:
调用 L.Map
的 getBoundsZoom
L.Map.include({
getSize: function () {
return new L.Point(400, 300);
}
});
var map = new L.Map(document.createElement('div'), {
'center': [0, 0],
'zoom': 0
});
var featureGroup = new L.FeatureGroup([
new L.Marker([0,-45]),
new L.Marker([0,45])
]);
var zoom = map.getBoundsZoom(featureGroup.getBounds());
不用说,以后在真实地图上使用派生的缩放级别时,只有当地图是您在 getSize
方法中预定义的大小时,它才会正确。如果您打算在不重新加载的情况下使用 L.Map
,也不要忘记恢复 getSize
方法。
我试图设置缩放以显示一个可变半径的圆,非常适合容器 DIV,这里是我使用的代码:
// r is the radius in meters (for example 2km => 2000)
circle.setRadius(r);
// <div> size containing leaflet map
var width = 300;
var height = 220;
// you have to use the MIN of them if you want the circle fit in
metresPerPixel = r * 2 / height;
// here the zoom level you have to use
z = (Math.log((40075016.686 * Math.cos(map.getCenter().lat * Math.PI/180))/metresPerPixel))/Math.log(2)-8;
mymap.setZoom(z.toFixed(2),{animate:false});
确保在创建地图时将 zoomSnap 设置为所需的值(我将其设置为最小值 0.1 以获得更好的结果)
公式是clear z from http://wiki.openstreetmap.org/wiki/Zoom_levels
的结果
我想做什么:
我有点手忙脚乱,我需要能够 找到多个形状的传单缩放级别,而无需创建地图实例并使用 map.fitBounds()
在其周围移动.
我坚持的 2 种可能的解决方案:
1) 我尝试制作 mock/temp 地图以访问 map.fitBounds()
功能并模拟 map.fitBounds()
-但无法正常工作,因为地图需要实例化一个 div 容器。
2) 我一直在寻找以编程方式计算传单缩放比例的方法。
-我还没有找到任何关于如何做到这一点的资源。
如果您有任何策略可以帮助我将这些原始数据转换为他们的传单对应物,那将是非常棒的!!
您可以使用未附加到 DOM:
的元素创建L.Map
实例
new L.Map(document.createElement('div'), {
'center': [0, 0],
'zoom': 0
});
问题是为了计算边界,负责的方法需要知道地图的大小。要获得大小,它将调用 L.Map
的 getSize
方法,但它总是 return {x:0, y:0}
的大小,因为地图的元素未附加到 DOM.您可以将 getSize
方法重写为 return 大小:
L.Map.include({
getSize: function () {
return new L.Point(400, 300);
}
});
var map = new L.Map(document.createElement('div'), {
'center': [0, 0],
'zoom': 0
});
console.log(map.getSize()); // o.Point {x: 400, y: 300}
现在您可以使用 L.LatLngBounds
:
L.Map
的 getBoundsZoom
L.Map.include({
getSize: function () {
return new L.Point(400, 300);
}
});
var map = new L.Map(document.createElement('div'), {
'center': [0, 0],
'zoom': 0
});
var featureGroup = new L.FeatureGroup([
new L.Marker([0,-45]),
new L.Marker([0,45])
]);
var zoom = map.getBoundsZoom(featureGroup.getBounds());
不用说,以后在真实地图上使用派生的缩放级别时,只有当地图是您在 getSize
方法中预定义的大小时,它才会正确。如果您打算在不重新加载的情况下使用 L.Map
,也不要忘记恢复 getSize
方法。
我试图设置缩放以显示一个可变半径的圆,非常适合容器 DIV,这里是我使用的代码:
// r is the radius in meters (for example 2km => 2000)
circle.setRadius(r);
// <div> size containing leaflet map
var width = 300;
var height = 220;
// you have to use the MIN of them if you want the circle fit in
metresPerPixel = r * 2 / height;
// here the zoom level you have to use
z = (Math.log((40075016.686 * Math.cos(map.getCenter().lat * Math.PI/180))/metresPerPixel))/Math.log(2)-8;
mymap.setZoom(z.toFixed(2),{animate:false});
确保在创建地图时将 zoomSnap 设置为所需的值(我将其设置为最小值 0.1 以获得更好的结果)
公式是clear z from http://wiki.openstreetmap.org/wiki/Zoom_levels
的结果