使用 openlayers 3 旋转地图不起作用答案

【问题标题】：Rotating map using openlayer3 is not working使用 openlayers 3 旋转地图不起作用
【发布时间】：2015-12-11 07:33:08
【问题描述】：

我正在寻找一种在 google map 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>

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

【问题讨论】：

标签： google-maps openlayers-3

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

对我来说，以下工作。

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

【讨论】：