Question

我正在寻找一种方法来旋转谷歌地图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,
})

使用openlayer3旋转地图不起作用

1 个答案: