javascript - Leaflet + Polymer 2 map 加载扭曲的瓷砖但适用于非 polymer 代码

Question

更新:我现在已经在 Plunker 中复制了这个问题.我确实检查了建议的重复问题。答案不正确或缺少 CSS 文件。如 leaflet quick start 中所述，我已经为 CSS 和 JS 导入了 v1.3.4。 . Plunker 显示 CSS 包含在元素的 Shadow DOM 中。我不是这种情况。此外，相同版本的 JS 和 CSS 适用于非 polymer 代码，但是，变形发生在 polymer 上。

为了在 Polymer 2 中正确加载传单 map ，我已经苦苦挣扎了好几天。这个问题现在让我神魂颠倒。我在 SO 中搜索了各种线程:this , Github: this , this和其他几个帖子，不幸的是仍然无法解决问题。在 Chrome 和 Firefox 中测试。我已经尝试使用 Openlayers 并且 map 加载完美。使用 Leaflet 和 Mapbox API 时会出现问题。很遗憾，由于客户要求，无法使用 Openlayers。

我的 map 呈现如下:代码片段:

<style include="shared-styles publish-project-styles">
    :host {
    display: block;
    padding: 20px;
  }
    #mapContainer{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }

    .leaflet-container{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }
</style>

<td  id="leftContainer" width="50%" style="padding: 15px;">
 <div id="mapContainer"></div>
 <!-- <canvas id="mapContainer" style="width: 400px; height: 400px; border: 1px solid #0A569D;"></canvas> --></td>

ready() {
    super.ready();          
    let leafmap = L.map(this.$.mapContainer).setView([48.84, 2.3], 5);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(leafmap);
}

更新代码:

<style include="shared-styles publish-project-styles">
    :host {
    display: block;
    padding: 20px;
  }
    #mapContainer{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }

    .leaflet-container{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }
</style>

<td  id="leftContainer" width="50%" style="padding: 15px;">
 <div id="mapContainer"></div>
 <!-- <canvas id="mapContainer" style="width: 400px; height: 400px; border: 1px solid #0A569D;"></canvas> --></td>

connectedCallback() {
    super.connectedCallback();          
    let leafmap = L.map(this.$.mapContainer).setView([48.84, 2.3], 5);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(leafmap);
    leafmap.invalidateSize();
}

我确实尝试过使用内联 CSS，将 JS 放在 connectedcallback() 和 ready() 中，将 CSS 放在父元素中等等。

我假设，鉴于我阅读的帖子，存在一些 CSS 问题。但不确定。如果有人可以在这方面提供帮助，真的很感激吗？如果需要更多信息，请告诉我。

谢谢。

Answer 1

传单 CSS 样式不适用于影子 DOM 元素。

要使其正常工作，您需要在此处添加 leaflet.css:

// ...
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">

<p>I'm a shadow DOM child element of x-foo.</p>
// ...

工作示例: https://plnkr.co/edit/CJUlwUnBezum9jgt93uF?p=preview