Несколько базовых слоев в openlayer

Question

Я хочу отобразить несколько базовых слоев в открытом слое.Я не знал, что я делаю не так.Отрезанный код приведен ниже

import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import sync from 'ol-hashed';

import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';

//! [map-const]
const map = new Map({
    //! [map-const]
    target: 'map-container',
    view: new View({
        center: [0, 0],
        zoom: 2
    })
});

sync(map);

//! [source]
const source = new XYZSource({
    url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
});

const source2 = new VectorSource({
    format: new GeoJSON(),
    url: './data/countries.json'
})
//! [source]

//! [layers]
const layer = new TileLayer({
    source: source
});

const layer2 = new VectorLayer({
    source: source2
})
map.addLayer(layer)
map.addLayer(laye2)

//! [layers]

На самом деле я пытаюсь отобразить два слоя, но оба слоя расположены друг над другом.Я не знаю, нужно ли мне добавить контроль или нет.Пожалуйста, помогите мне