Question

我想在地图一侧创建一个侧边栏来放置我的各种按钮。我选择了ol-3侧边栏（kotlin docs）并且它有效，唯一的问题是侧边栏在任何视图（桌面或移动设备）中都没有与地图对齐。请你帮助我好吗？我的代码（简单版本）是这样的：

<html>
<head>
    <meta charset='utf-8'/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>.
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/js/tether.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.4.2/ol.js" type="text/javascript"></script>
    <script src="js/ol3-sidebar.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/ol3-sidebar.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.4.2/ol.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/css/tether.min.css">
</head>
<style>body {padding: 0;margin: 0;overflow: hidden;background-color: #ff9900;}</style>
<body>
    <div class="container-fluid" id="index">
        <div id="sidebar" class="sidebar collapsed" style= "max-width: 100%; height: auto;">
            <div class="sidebar-tabs">
                <ul role="tablist">
                    <li><a href="#a" role="tab">A</a></li>
                    <li><a href="#b" role="tab">B</a></li>
                    <li><a href="#c" role="tab">C</a></li>
                </ul>
                <ul role="tablist">
                    <li><a href="#settings" role="tab">Settings</a></li>
                </ul>
            </div>
            <div class="sidebar-content">
                <div class="sidebar-pane" id="a">
                    <h1 class="sidebar-header">a</h1>
                    <hr width="100%" size="8" align="center">
                </div>
                <div class="sidebar-pane" id="b">
                    <h1 class="sidebar-header">b</h1>
                    <hr width="100%" size="8" align="center">
                </div>
                <div class="sidebar-pane" id="c">
                    <h1 class="sidebar-header">c</h1>
                    <hr width="100%" size="8" align="center">
                </div>
                <div class="sidebar-pane" id="settings">
                    <h1 class="sidebar-header">Settings</h1>
                    <hr width="50%" size="8" align="center">
                </div>
            </div>
        </div>
        <div id="map" class="sidebar-map mymap" style="width: 100%; height: 85%;">
            <script>
                var layers = [
                    new ol.layer.Tile({source: new ol.source.OSM()})
                ];
                var map = new ol.Map({
                    controls: ol.control.defaults({
                        attributionOptions: ({collapsible: false})
                    }).extend([
                    new ol.control.ZoomSlider(),
                    new ol.control.Rotate(),
                    new ol.control.OverviewMap(),
                    new ol.control.ScaleLine(),
                    new ol.control.FullScreen()
                    ]),
                    interactions: ol.interaction.defaults().extend([
                        new ol.interaction.Select({condition: ol.events.condition.mouseMove})
                    ]),
                    layers: layers,
                    target: 'map',
                    view: new ol.View({
                      center: [2687148, 4556999],
                      zoom: 7
                    })
                });
                var sidebar = new ol.control.Sidebar({element: 'sidebar', position: 'left'});
                map.addControl(sidebar);
            </script>
        </div>
    </div>
</body>

Answer 1

您可以尝试在sidebar div：

中嵌入map div

<div id="map" class="sidebar-map mymap" style="width: 100%; height: 85%;">
    <div id="sidebar" class="sidebar collapsed" style= "max-width: 100%; height: auto;">
   ...
   </div>
</div>

它对我有用（使用Openlayers 4.6.5和sidebar-v2）。唯一的问题是单击导航选项卡会将页面滚动到该元素。

编辑：最后一个问题可以通过添加感叹号轻松解决，即使用<a href="#!...>代替<a href="#...>（请参阅：How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?）

EDIT2：更好的是，在导航选项卡列表中添加class="tab"并（因为您使用的是JQuery）添加一个函数：

$('.tab').click(function($e) {
    $e.preventDefault();
});

Javascript + OpenLayers中的补充工具栏

1 个答案: