1

OpenLayers 示例“高级视图定位”（https://openlayers.org/en/latest/examples/center.html）展示了如何创建“视图中的视图”。

在此处输入图像描述

如果您检查该示例，它会使用传递给 的填充view.fit()。我看到的问题是只有该函数接受填充，因此无法为重新定位设置动画。

此外，如果您查看屏幕截图，适合操作将地图置于 B 点的中心，但单击缩放按钮会使用 A 点。

我的问题是：有没有办法在创建视图时指定该子视图，以便所有操作（动画、缩放、拟合等）总是使用 B 点？

一个额外的问题是，像 Map Rotate (Alt+Shift+m​​ouse) 这样的默认交互围绕 A 而不是 B 旋转。因此，定义该子视图以自动影响所有视图操作会非常有帮助，比如说在打开侧面板时，例子。

4

1 回答 1

1

fit确实有持续时间和缓动选项，并且animate有锚选项。但是只有一个视图，它只是使用 CSS 移动的控件，因此任何其他交互都将应用于完整视图。但是您可以基于共享视图示例https://openlayers.org/en/v4.6.5/examples/side-by-side.html的解决方案并有两个同步的地图，使用 CSS 溢出外部地图（创建时没有控件）以偏移其中心并将其与另一张地图重叠，以使中心重合。此代码将通过将外部地图扩展 4/3 将中心定位在 2/3 宽度和高度的右下角，内部地图具有完整外部地图 http://mikenunn 的宽度和高度的 45%。 16mb.com/demo/view-on-view-br.html

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
  <style>
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .map1 {
        position: absolute;
        width: calc(100% *4/3);
        height: calc(100% *4/3);
    }
    .map2 {
        position: absolute;
        left: calc((100% - 45%)/2);
        top: calc((100% - 45%)/2);
        width: 45%;
        height: 45%;
    }
  </style>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  <title>OpenLayers View on View example</title>
</head>

<body>
  <div id="map1" class="map1"><div id="map2" class="map2"></div></div>
  <script type="text/javascript">

    var source = new ol.source.OSM();

    var map2 = new ol.Map({
        target: 'map2',
        layers: [new ol.layer.Tile({ source: source })],
        view: new ol.View({
            center: ol.proj.fromLonLat([2.3442, 48.8635]),
            zoom: 10
        })
    });

    var map1 = new ol.Map({
        target: 'map1',
        controls: [],
        layers:  [new ol.layer.Tile({ source: source, opacity: 0.6 })],
        view: map2.getView()
    });

    var map1div = document.getElementById("map1");
    var map2div = document.getElementById("map2");
    var map1ov = map1div.getElementsByClassName("ol-overlaycontainer")[1];
    map1ov.appendChild(map2div);

  </script>
</body>

</html>

这个 CSS 将通过向左和向上而不是向右和向下扩展外部地图来将中心定位在宽度和高度的 1/3 的左上角http://mikenunn.16mb.com/demo/view-on-view-tl .html

.map1 {
    position: absolute;
    width: calc(100% *4/3);
    height: calc(100% *4/3);
    left: calc(100% - 100% *4/3);
    top: calc(100% - 100% *4/3);
}
于 2019-01-24T01:17:32.353 回答