問題描述

我正在嘗試創(chuàng)建一個(gè)在 Reveal.js 之上運(yùn)行的演示文稿，該演示文稿將在其中一張幻燈片中包含一個(gè) Leaflet.js 地圖.我已經(jīng)包含了所有必要的 Javascript &CSS 文件到我的 Reveal.js 演示文稿中，我可以使地圖出現(xiàn)在幻燈片上.

I am trying to create a presentation running on top of Reveal.js, which would include a Leaflet.js map within one of the slides. I have included all necessary Javascript & CSS files into my Reveal.js presentation and I can make the map appear on the slide.

但是，問題是:地圖圖塊顯示不正確.我看到的不是實(shí)際的地圖圖塊，而是灰色背景和一些水平黑線.我可以放大/縮小并平移地圖，并且黑線會(huì)相應(yīng)移動(dòng).

However, the problem is: map tiles are not displayed correctly. Instead of the actual map tiles, all I am seeing is gray background and some horizontal black lines. I can zoom in/out and pan the map, and the black lines are moving accordingly.

Javascript 控制臺(tái)中沒有錯(cuò)誤消息，并且瀏覽器似乎正在按照應(yīng)有的方式從服務(wù)器下載地圖圖塊.我相信這個(gè)問題與 Leaflet 地圖圖塊的 CSS 代碼有關(guān) - .leaflet-tile 在 leaflet.css 中 - 在某種程度上與 Reveal.js 不兼容.

There are no error message in the Javascript console, and the browser seems to be downloading map tiles from server exactly as it should. I believe the problem has something to do with the CSS code of Leaflet map tiles - .leaflet-tile within leaflet.css - being somehow incompatible with Reveal.js.

問題是:有誰(shuí)知道如何解決這個(gè)問題?還是沒有解決辦法的死胡同?

The question is: Does anyone know how to get around this issue? Or is it a deadend with no possible solution?

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

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

一個(gè)明顯的解決方法是使用 <iframe> 標(biāo)簽將地圖嵌入到演示文稿中.似乎工作得很好，也許將框架分開會(huì)更好.然而，不利的一面是，如果演示文稿中有多個(gè)地圖，每個(gè)地圖都在其自己的 <iframe> 中，則 Leaflet.js 的副本會(huì)為每個(gè) iframe 加載到內(nèi)存中.

One obvious workaround for this is to use <iframe> tag to embed the map into the presentation. Seems to work just fine, and maybe it is better to keep the frameworks separated. However, the downside is that if there are several maps in the presentation, each within its own <iframe>, a copy of Leaflet.js is loaded to memory for each and every iframe.

編輯 #2: 一個(gè)更好的解決方案似乎是使用 PolymapsLeaflet.js.似乎可以將多個(gè) Polymaps 地圖嵌入到 reveal.js 演示文稿中.沒有問題.

EDIT #2: A better solution, it seems, is to use Polymaps instead of Leaflet.js. It seems that several Polymaps maps can be embedded into a reveal.js presentaion. No issues.

推薦答案

我發(fā)現(xiàn)用 web 組件很容易做到，這樣，shadow dom 將保護(hù)我的傳單地圖免受揭示 css 的邪惡之手

I found it easily to do it with a web component, this way, the shadow dom will protect my leaflet map from the evil hands of reveals css

這是一個(gè)帶有示例的倉(cāng)庫(kù)

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

這是網(wǎng)頁(yè)組件

<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 >OpenStreetMap</a> contributors, ' +
                    '<a  +
                    'Imagery ? <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>

這篇關(guān)于如何將 Leaflet 地圖嵌入到 Reveal.js 演示文稿中?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！