Question

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

错误：

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，并且具有已知的解决方案：

必须在呼叫ENV PYTHONPATH="/usr/src/app:${PYTHONPATH}"之前将<div id="leafletmap">添加到dom。

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

[传单1.4]中是否有找到和使用基于阴影DOM的L.map('leafletmap') div的方法？

答案是“不，但是”。

如果您仔细阅读Leaflet API参考，则会发现L.Map can be instantiated in two ways：通过提供mapid中的id（将成为地图的容器）或< em>提供容器的HTMLElement实例。

换句话说，类似于：

HTMLElement

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/leaflet@1.4.0/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);
})();

如何在Shadow DOM中使用div作为Leaflet映射容器？

2 个答案: