在传单地图中添加额外的缩放级别 [英] Adding an extra zoom levels in Leaflet Maps

问题描述

我正在使用传单来创建带有我自己的图块的照片地图，该图可以按预期工作.

Im using leaflet to create a photo map, with my own tiles, which works as expected.

我正在尝试找出如何防止缩放遵循此 Quadtree 类型模式:

Im trying to work out how I can prevent the zoom from following this Quadtree type pattern:

• 缩放级别0-整个地图宽度= 256像素；
• 缩放级别1-整个地图宽度= 512px;
• 缩放级别2-整个地图宽度= 1024px;
• 依此类推...

我希望能够放大25％或100px.

I would like to be able to zoom in say increments of 25% or 100px.

100px增量的示例:

An example of 100px increments:

• 缩放级别0-整个地图宽度= 200px；
• 缩放级别1-整个地图宽度= 300px;
• 缩放级别2-整个地图宽度= 400px;
• 依此类推...

问题: 这样做的逻辑是什么?如果有可能吗?

我想要这样做的原因是，我的照片地图(不会像普通地图那样包裹)可以更响应并很好地适合用户的屏幕尺寸.

My reason for wanting to do this is so that my photo map (which doesnt wrap like a normal map) can be more responsive and fit the users screen size nicely.

我演示了我的问题，可以在此处

I made a demonstration of my issue which can be seen here

推荐答案

简短的答案是，您只能显示已预渲染图块的缩放级别.传单不会为您创建中间缩放级别.

The short answer is that you can only show zoom levels for which you have pre-rendered tiles. Leaflet won't create intermediary zoom levels for you.

长答案是要使用此功能，您需要定义自己的CRS比例尺方法并将其传递给地图，例如:

The long answer is that in order to use do this, you need to define your own CRS scale method and pass it to your map, for example:

L.CRS.CustomZoom = L.extend({}, L.CRS.Simple, {
    scale: function (zoom) {
        // This method should return the tile grid size
        // (which is always square) for a specific zoom
        // We want 0 = 200px = 2 tiles @ 100x100px,
        // 1 = 300px = 3 tiles @ 100x100px, etc.
        // Ie.: (200 + zoom*100)/100 => 2 + zoom

        return 2 + zoom;
    }
});

var map = L.map('map', { crs: L.CRS.CustomZoom }).setView([0, 0], 0);

在此示例中，我扩展了L.CRS.Simple，但是您当然可以从所需的API扩展任何CRS，甚至可以从头开始创建自己的CRS.

In this example, I've extended L.CRS.Simple, but you can of course extend any CRS from the API you'd like, or even create your own from scratch.

使用缩放系数导致地图像素大小不是您的图块大小的倍数，这意味着您的右/下边缘图块将仅部分填充地图数据.可以通过将此类图块的非地图部分设为100％透明(或与背景颜色相同)来解决此问题.

Using a zoom factor which results in a map pixel size that is not a multiple of your tilesize, means your right/bottom edge tiles will only be partially filled with map data. This can be fixed by making the non-map part of such tiles 100% transparent (or same the colour as your background).

但是，在我看来，将tilesize设置为匹配最低公分母(在本例中为100px)是一个更好的主意.请记住通过在图块图层中使用tileSize选项来反映这一点.而且，当然，您需要将图像重新渲染为100x100像素的图块，而不是当前使用的256x256图块.

However, it is, in my opinion, a much better idea to set the tilesize to match the lowest common denominator, in this case 100px. Remember to reflect this by using the tileSize option in your tile layer. And, of course, you will need to re-render your image into 100x100 pixels tiles instead of the 256x256 tiles you are using currently.

一个警告，LeafletJS(0.5)的当前版本存在一个错误，该错误会阻止自定义scale()方法的工作，这是因为TileLayer类被硬编码为使用2幂次缩放比例.但是，您需要做的更改很小，希望在以后的Leaflet版本中可以解决.只需将TileLayer._getWrapTileNum()从以下位置更改:

One caveat, the current version of LeafletJS (0.5) has a bug that prevents a custom scale() method from working, due to the TileLayer class being hardcoded to use power-of-2 zoom scaling. However, the change you need to do is minor and hopefully this will be addressed in a future release of Leaflet. Simply change TileLayer._getWrapTileNum() from:

_getWrapTileNum: function () {
    // TODO refactor, limit is not valid for non-standard projections
    return Math.pow(2, this._getZoomForUrl());
},

收件人:

_getWrapTileNum: function () {
    return this._map.options.crs.scale(this._getZoomForUrl());
},

这篇关于在传单地图中添加额外的缩放级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！