OpenLayers：缩放图标很小

Question

我在Thymeleaf模板中有这段代码，该模板使用OpenLayers（高性能，功能丰富的库）显示地图

<div id="Map">
                    <script th:src="@{/js/OpenLayers.js}"></script>
                    <script th:inline="javascript">
                    /*<![CDATA[*/

                        var lat            = /*[[${lat}]]*/;
                        var lon            = /*[[${lng}]]*/;
                        var zoom           =  10;

                        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
                        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection

                        var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);                        
                        //var position2       = new OpenLayers.LonLat(4.373067, 50.828010).transform( fromProjection, toProjection);

                        var size = new OpenLayers.Size(32,48);
                        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
                        var icon = new OpenLayers.Icon('../../../tdkcub/images_tdk/map_marker.png', size, offset);

                        map = new OpenLayers.Map("Map");
                        var mapnik  = new OpenLayers.Layer.OSM();
                        map.addLayer(mapnik);

                        var markers = new OpenLayers.Layer.Markers( "Markers" );

                        map.addLayer(markers);

                        markers.addMarker(new OpenLayers.Marker(position, icon));                        
                       // markers.addMarker(new OpenLayers.Marker(position2, icon));

                        map.setCenter(position, zoom);

                        var myLocation = new OpenLayers.Geometry.Point(lon, lat).transform('EPSG:4326', 'EPSG:3857');

                        /*]]>*/   
                    </script>
                  </div>

但是当我看到地图时，simbols-/ +显得很小。

Answer 1

您很可能会错过OpenLayers的默认样式，或者与它们有其他样式冲突。 地图控件不是画布的一部分，而是常规的html元素（按钮）。

添加CSS：

<link href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/>

或自己设置按钮样式，html非常简单：

<div class="ol-zoom ol-unselectable ol-control">
  <button class="ol-zoom-in" type="button" title="Zoom in">+</button>
  <button class="ol-zoom-out" type="button" title="Zoom out">−</button>
</div>