CODEWITHSUNDEEP
openlayers-3qgis
Packwood
Packwood

Reputation: 281

How do I rotate the complete view in Openlayers?

I have a map I have created in QGIS 3.8. It is using OSM as the base map and I have a simple raster layer which is a georeferenced map.

QGIS has a useful plugin qgis2web that exports a complete set of files for Openlayers (and Leaflet).

Once in Openlayer format and viewed in a browser it is possible to rotate the complete view to rotate say the north-point 40 degrees (i.e. about 0.7 Radians) east by using Alt+Shift+Drag. You can see a demo of this working here: https://openlayers.org/en/latest/examples/rotation.html

What I am trying to do is to modify the generated code to show the map already rotated to the required angle. (This is because the georeferenced map does not have its north point at the top of the page.)

This is the layers.js code that I am trying to modify, presumably, I need a rotation: 0.7 but I cannot figure out where!

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];

Upvotes: 1

Views: 3527

Answers (1)

Packwood
Packwood

Reputation: 281

Thank you pavlos

Just adding one line at the end of the body of html file sorted it:

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

Upvotes: 2

Related Questions