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>