如何在 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>
我有一张用 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>