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>

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

Answer 1

您很可能缺少 OpenLayers 默认样式或与它们有一些其他样式冲突。地图控件不是 canvas 的一部分，而是常规 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>

OpenLayers：缩放图标太小了

OpenLayers: zoom icon so small

html

javascript

openlayers

thymeleaf