如何在Shadow DOM中使用div作为Leaflet地图容器？

Question

下面的基于JS的自定义元素似乎工作但找不到我添加到shadow DOM根目录的mapid div。在Leaflet或自定义元素中是否有一种方法允许查找和使用基于DOM的影子mapid div的股票Leaflet（版本1.4是本文中的最新版本）？

错误：

Uncaught Error: Map container not found.
    at NewClass._initContainer (Map.js:1102)
    at NewClass.initialize (Map.js:136)
    at new NewClass (Class.js:22)
    at Module.createMap (Map.js:1717)
    at new GDMap (gd-map.js:16)
    at gd-map.js:30
    at gd-map.js:31

我正在进行这种方法，这就是Leaflet正在寻找dom根目录中的mapid div并且无法在阴影dom中找到它的情况。

使用Javascript

import * as L from './leaflet/leaflet-src.esm.js';

(function () {
    class GDMap extends HTMLElement {
        constructor() {
            super();

            this.attachShadow({ mode: 'open' });
            this.shadowRoot.innerHTML = `<div style="height:180px" id="mapid"></div>`;

           var map = L.map('mapid').setView([51.505, -0.09], 13);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

            }).addTo(map);


            L.marker([51.5, -0.09]).addTo(map)
                .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
                .openPopup();

        }
    }
    window.customElements.define('geodex-map', GDMap);
})();

编辑的帖子，以指出div ID，但仍然是相同的问题。

Answer 1

尝试在容器在DOM中之前实例化Leaflet映射是一个known problem，有一个已知的解决方案：

在调用<div id="leafletmap">之前，必须将L.map('leafletmap')添加到dom中。

但是你已经知道了这一点，因为你提出了一个非常好的具体问题：

在[Leaflet 1.4]中有没有办法找到并使用基于DOM的阴影mapid div？

答案是“不，但是”。

如果你仔细阅读Leaflet API参考，你会注意到L.Map can be instantiated in two ways：通过提供id的HTMLElement作为地图的容器，或者通过提供容器的HTMLElement实例。

换句话说，有些东西：

var mapdiv = document.createElement('div');
shadow.appendChild(mapdiv);
var map = L.map(mapdiv)

Answer 2

我认为现在解决了以下问题。

需要将map div作为元素传递，不为Leaflet提供id字符串。还传递了CSS。

import * as L from './leaflet/leaflet-src.esm.js';

(function () {
    class GDMap extends HTMLElement {
        constructor() {
            super();

            let shadow = this.attachShadow({mode: 'open'});
            var mapdiv = document.createElement('div');
            mapdiv.setAttribute('id', 'mapid');
            // mapdiv.setAttribute('style', 'height:180px');
            mapdiv.style.height = "180px";
            mapdiv.innerHTML = ' <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="crossorigin=""/>';
            shadow.appendChild(mapdiv);

            var map = L.map(mapdiv).setView([51.505, -0.09], 13);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

            }).addTo(map);

            L.marker([51.5, -0.09]).addTo(map)
                .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
                .openPopup();

        }
    }
    window.customElements.define('geodex-map', GDMap);
})();