Question

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

如果您查看示例，它将使用传递给view.fit()的填充。我看到的问题是，只有该函数才能接受填充，因此无法对重定位进行动画处理。

此外，如果您查看屏幕截图，则fit操作会将地图居中于B点，但是单击缩放按钮使用A点。

我的问题是：创建视图时是否可以指定子视图，以便所有操作（动画，缩放，适合等）始终使用B点？

另一个问题是，默认交互（例如“地图旋转”（Alt + Shift +鼠标））围绕A旋转，而不围绕B旋转。因此，定义该子视图以自动影响所有视图操作非常有帮助，比如说打开侧面时例如面板。

Answer 1

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

<!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通过向左和向上而不是向右和向下http://mikenunn.16mb.com/demo/view-on-view-tl.html

扩展外部地图，将中心位置定位为宽度和高度的1/3处的左上方

.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);
}

是否可以在OpenLayers 5中为视图定义有效视口区域？

1 个答案: