如何在 Openlayers 中旋转完整视图?

How do I rotate the complete view in Openlayers?

我有一张用 QGIS 3.8 制作的地图。它使用 OSM 作为底图,我有一个简单的栅格图层,它是一个地理参考地图。

QGIS 有一个有用的插件 qgis2web,可以为 Openlayers(和 Leaflet)导出一整套文件。

一旦采用 Openlayer 格式并在浏览器中查看,就可以旋转整个视图,例如使用 Alt+Shift+Drag 将北点向东旋转 40 度(即大约 0.7 弧度)。你可以在这里看到这个工作的演示:https://openlayers.org/en/latest/examples/rotation.html

我想做的是修改生成的代码以显示地图已经旋转到所需的角度。 (这是因为地理参考地图的北点不在页面顶部。)

这是我要修改的 layers.js 代码,大概我需要一个旋转:0.7 但我不知道在哪里!


var wms_layers = [];

    var lyr_OpenStreetMap_0 = new ol.layer.Tile({
        'title': 'OpenStreetMap',
        'type': 'base',
        'opacity': 1.000000,


        source: new ol.source.XYZ({
attributions: '<a href=""></a>',
            url: 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png'
        })
    });var lyr_MyMap = new ol.layer.Image({
                        opacity: 1,
                        title: "King's Park",


                        source: new ol.source.ImageStatic({
                           url: "./layers/MyMap.png",
attributions: '<a href=""></a>',
                            projection: 'EPSG:3857',
                            alwaysInRange: true,
                            imageExtent: [-100073.533268, 6847294.601171, -93832.319311, 6852417.437192]
                        })
                    });

lyr_OpenStreetMap_0.setVisible(true);lyr_MyMap.setVisible(true);
var layersList = [lyr_OpenStreetMap_0,lyr_MyMap];

谢谢pavlos

只需在 html 文件正文末尾添加一行即可对其进行排序:

<script>map.getView().setRotation(Math.PI / 2.6 );</script>