使用 openlayer3 旋转地图不起作用

Question

我正在寻找一种方法来旋转 google 地图 api 中不包含图块的地图。如果可以，我可以使用 openlayer3 来执行此操作吗为什么演示的示例不适用于以下示例

<!DOCTYPE html>
<html>
<head>
    <title>Rotation example</title>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.11.2/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>

</head>
<body>
<div class="container-fluid">

    <div class="row-fluid">
        <div class="span12">
            <div id="map" class="map"></div>
        </div>
    </div>

</div>
<script>
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
            })
        }),
        view: new ol.View({
            center: [1.353199,103.986908],
            rotation: Math.PI / 6,
            zoom: 10
        })
    });

</script>
</body>
</html>

我在这里做错了什么为什么地图本身没有显示我对此很陌生请说出我哪里错了

Answer 1

那里的代码工作得很好。地图正在加载，您还可以看到它已根据需要旋转，因为在右上角它显示了重置旋转的控件。此按钮仅在地图旋转时可见。

它似乎没有加载，因为中心似乎以错误的方式指定，所以它在地图上显示了一个只有水的地方。您指定为地图中心的坐标必须针对地图的投影进行变换。尝试像这样设置地图视图：

view: new ol.View({
    center: ol.proj.fromLonLat([103.986908, 1.353199]),
    rotation: Math.PI / 6,
    zoom: 10,
})

Answer 2

对我来说，以下工作。

olMap.getView().rotate( olMap.getView().getRotation() + Math.PI / 4.0);

使用 openlayer3 旋转地图不起作用

Rotating map using openlayer3 is not working

google-maps

openlayers-3