在OpenLayers 2中放大瓷砖或增加MaxZoom而不扭曲投影

时间:2017-02-22 15:46:50

标签: javascript openlayers bing-maps

我在Bing中使用OpenLayers2。我的客户需要更深的缩放级别才能与地图进行交互。目前,我可以实现的最大缩放级别为19,我使用getZoom()函数进行了测试。我试图将地图构造函数中的“numZoomLevels”设置为更高的数字,但Bing / OL似乎忽略了它。我想知道是否有办法强制将瓷砖降低到较低的缩放级别,或者我是否可以简单地放大现有的瓷砖,这样即使细节有点模糊,我也可以看到更大的图像。然而,至关重要的是,我不修改投影,因为具有正确的纬度/经度值对客户的功能至关重要。

map = new OpenLayers.Map('map', {
    allOverlays: false,
    numZoomLevels: 20,
    controls: [
        new OpenLayers.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        }),
        new OpenLayers.Control.LayerSwitcher(),
        new OpenLayers.Control.Zoom({
            zoomInId: "customZoomIn",
            zoomOutId: "customZoomOut"
        })
    ]});

var aerial = new OpenLayers.Layer.Bing({
    name: "Aerial",
    key: apiKey,
    type: "Aerial"
});

我偶然发现了OL3 magnify example,但它是为OL3编写的,有点超出了我的转换范围,因为我需要将放大选项嵌入缩放级别,而不仅仅是上下文叠加。另外,我没有大量的帆布经验。任何帮助表示赞赏!

1 个答案:

答案 0 :(得分:0)

我明白了,实际上很简单。首先,numZoomLevels应该位于图层级别,而不是地图级别。如果您希望能够放大Bing提供的范围,则必须将fractionalZoom设置为true,如下所示:

    map = new OpenLayers.Map('map', {
    allOverlays: false,
    fractionalZoom: true,
    controls: [
        new OpenLayers.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        }),
        new OpenLayers.Control.LayerSwitcher(),
        new OpenLayers.Control.Zoom({
            zoomInId: "customZoomIn",
            zoomOutId: "customZoomOut"
        })
    ]});

然后,在每个图层上,您需要设置一个分辨率数组。您需要为numZoomLevels下列出的每个缩放级别创建一个值。我需要22个缩放级别。

    var aerial = new OpenLayers.Layer.Bing({
      name: "Aerial",
      key: apiKey,
      type: "Aerial",
      numZoomLevels: 22,
      resolutions: bingResolutions,
      serverResolutions: bingServerResolutions,
      transitionEffect: 'resize'
    });

在OpenLayers.Layer.Bing的源代码中,已经定义了一个解析块,该块已映射到它们的值:https://msdn.microsoft.com/en-us/library/aa940990.aspx

var bingResolutions = [156543.03390625, 78271.516953125, 39135.7584765625,
19567.87923828125, 9783.939619140625, 4891.9698095703125,
2445.9849047851562, 1222.9924523925781, 611.4962261962891,
305.74811309814453, 152.87405654907226, 76.43702827453613,
38.218514137268066, 19.109257068634033, 9.554628534317017,
4.777314267158508, 2.388657133579254, 1.194328566789627,
0.5971642833948135, 0.29858214169740677, 0.14929107084870338,
0.07464553542435169];

var bingServerResolutions = [156543.03390625, 78271.516953125, 39135.7584765625,
19567.87923828125, 9783.939619140625, 4891.9698095703125,
2445.9849047851562, 1222.9924523925781, 611.4962261962891,
305.74811309814453, 152.87405654907226, 76.43702827453613,
38.218514137268066, 19.109257068634033, 9.554628534317017,
4.777314267158508, 2.388657133579254, 1.194328566789627,
0.5971642833948135];

服务器分辨率是Bing本身的平铺分辨率。附加分辨率(0.29858214169740677, 0.14929107084870338, 0.07464553542435169)是我的小数缩放级别,只需放大第19层图块。

Here是OpenLayers针对OSM层的工作示例。

希望这有助于其他人!