OpenLayers ZoomSlider не появляется

Question

Итак, я создаю карту, используя OpenLayers:

var map;
var mapLat = 0;
var mapLng = 0;
var mapDefaultZoom = 14;
var view = new ol.View({
    center: ol.proj.fromLonLat([mapLng, mapLat]),
    zoom: mapDefaultZoom
});
var oldLayer;
function initMap() {
    map = new ol.Map({
        target: 'theMap',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM({
                    url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'
                })
            })
        ],
        view: view
    });
    map.addControl(new ol.control.ZoomSlider());
}

Но по какой-то причине ZoomSlider не будет отображаться на карте. Есть ли какая-то инициализация, которую мне нужно сделать, скажем, чтобы дать ей размер и позицию? Или я инстанцирую это неправильно? Я пытался использовать оператор импорта import ZoomSlider from 'ol/control/ZoomSlider'; или что-то в этом роде, но у меня только ошибка ...

Answer 1

Вам нужно применить правильные стили через ol.css, чтобы правильно расположить ползунок Zoom.

См. Пример здесь на основе приведенного выше кода: https://stackblitz.com/edit/ol-zoom-slider

Обратите внимание на ссылку на стилив index.html