vuejs2 - 使用不同版本的传单 api 和 css 映射被破坏

Question

在我的 vue/cli 4/vuex/bootstrap-vue 应用程序中，我添加了传单并得到了破坏的布局。问我有一个链接到这个 Leaflet drawing tile disjointly 分支，说我没有在我的文件中包含 css。在我找到的链接上：

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

看起来这是此页面上唯一的 CSS。所以我打开了链接并将所有 css 复制到我的 .vue 文件中

   <style lang="scss" scoped>
      ...
    </style>

此外，我将这些链接中的所有图像上传到 project/public/images 并编辑了定义中的所有图像路径。但是地图看起来不正确，看起来像：

在我的代码中，我使用以下命令初始化映射：

        var pointsMap = L.map('mapid', {zoomControl: false}).setView([51.505, -0.09], 7);

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            maxZoom: 5,
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1
        }).addTo(pointsMap);

问题可能出在不同版本的传单 api 和 css 上吗？

怎么处理更好？

谢谢！

标签： vuejs2leaflet