javascript - 如何将传单 map 嵌入到 Reveal.js 演示文稿中？

Question

我正在尝试创建一个在 Reveal.js 上运行的演示文稿，其中将包含一张幻灯片中的 Leaflet.js map 。我已经在我的 Reveal.js 演示文稿中包含了所有必要的 Javascript 和 CSS 文件，我可以让 map 出现在幻灯片上。

但是，问题是: map 图块显示不正确。我看到的不是实际的 map 图块，而是灰色背景和一些水平黑线。我可以放大/缩小和平移 map ，黑线会相应地移动。

Javascript 控制台中没有错误消息，并且浏览器似乎正在完全按照预期从服务器下载 map 图块。我认为问题与 Leaflet map 图块的 CSS 代码有关 - .leaflet-tile在 Leaflet.css 中 - 不知何故与 Reveal.js 不兼容。

问题是:有谁知道如何解决这个问题？或者这是一个没有可能解决方案的死胡同？

我有以下 CSS 用于 <div id="map"> :

#map {
    height:400px;
    width:100%;
}

编辑:一个明显的解决方法是使用 <iframe>标记以将 map 嵌入到演示文稿中。似乎工作得很好，也许最好将框架分开。但是，缺点是如果演示文稿中有多个 map ，每个 map 都在自己的 <iframe> 中。 ，每个 iframe 都会将 Leaflet.js 的副本加载到内存中。

编辑 #2:似乎更好的解决方案是使用 Polymaps而不是 Leaflet.js。似乎可以将多个 Polymaps map 嵌入到reveal.js 演示文稿中。没有问题。

Answer 1

我发现使用 web 组件很容易做到这一点，这样，阴影 dom 将保护我的传单 map 免受揭示 css 的邪恶之手

here is a repo with an example

<link rel="import" href="./leaflet-map.html">
...
<div class="reveal">
  <div class="slides">
    <section data-state="map">
       <leaflet-map></leaflet-map>
    </section>
  </div>
</div>

这是网络组件

<template id="leaflet-map-template">
<link rel="stylesheet" href="./bower_components/leaflet/dist/leaflet.css">
<div id="mapid" style="height: 500px"></div>
    <!-- LEAFLET JS -->
</template>
<script src="./bower_components/leaflet/dist/leaflet.js"></script>
<script>
    class LeafletMap extends HTMLElement {
        constructor () {
            super();
            let tmpl = document.currentScript.ownerDocument.querySelector('template')
            let shadowRoot = this.attachShadow({mode: 'open'})
            shadowRoot.appendChild(tmpl.content.cloneNode(true))

            let mapDiv = this.shadowRoot.getElementById('mapid')
            this.map = L.map(mapDiv).setView([19.39682052576622, -99.13478851318361], 13)
            // this.setAttribute('map', map)
            // Tiles de open street maps
            //L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map)

            L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                maxZoom: 18,
                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'
            }).addTo(this.map)
            let myIcon = L.icon({
                iconUrl: './lentes.png',

                iconSize:     [40, 40], // size of the icon
                iconAnchor:   [20, 20], // point of the icon which will correspond to marker's location
                tooltipAnchor: [20,0]
            })
            L.marker(
                [19.418657758792698, -99.14065182209016],
                {icon: myIcon}
            ).bindTooltip('Ranchito').addTo(this.map)
        }

        resize() {
            this.map.invalidateSize()
        }
    }
    window.customElements.define('leaflet-map', LeafletMap)
</script>