在Web应用程序中使用OSM层

Question

我是在Web应用程序中使用地图的初学者。我想在我的应用程序中使用一些OpenStreetMap图层，并且在创建图层时似乎必须使用地图提供程序URL（或类似的东西）。 我在下面尝试了代码，但是看不到任何地图。有谁可以帮助我吗？我需要访问密钥吗？

    <script>

        import 'ol/ol.css';
        import Map from 'ol/Map';
        import View from 'ol/View';
        import TileLayer from 'ol/layer/Tile';
        import XYZSource from 'ol/source/XYZ';
        alert();
        new Map({
            target: 'map',
            layers: [
                new TileLayer({
                    source: new XYZSource({
                        url: 'https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}.png'
                    })
                })
            ],
            view: new View({
                center: [0, 0],
                zoom: 2
            })
        });

    </script>