小叶+聚合物2使用扭曲的瓷砖加载地图但是使用非聚合物代码 [英] Leaflet + Polymer 2 map loading with distorted tile however works with non-polymer code

问题描述

更新：
我现在已经在
代码片段：

 < style include =shared-styles publish-project-styles> 
：host {
 display：block; 
填充：20px; 
} 
 #mapContainer {
宽度：100％;身高：400px;边框：1px solid＃0A569D; 
} 
 
 .leaflet-container {
宽度：100％;身高：400px;边框：1px solid＃0A569D; 
} 
< / style> 
 
< td id =leftContainerwidth =50％style =padding：15px;> 
< div id =mapContainer>< / div> 
<！ - < canvas id =mapContainerstyle =width：400px; height：400px; border：1px solid＃0A569D;>< / canvas> - >< / TD> 
 
 ready（）{
 super.ready（）; 
让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; 
填充：20px; 
} 
 #mapContainer {
宽度：100％;身高：400px;边框：1px solid＃0A569D; 
} 
 
 .leaflet-container {
宽度：100％;身高：400px;边框：1px solid＃0A569D; 
} 
< / style> 
 
< td id =leftContainerwidth =50％style =padding：15px;> 
< div id =mapContainer>< / div> 
<！ - < canvas id =mapContainerstyle =width：400px; height：400px; border：1px solid＃0A569D;>< / canvas> - >< / TD> 
 
 connectedCallback（）{
 super.connectedCallback（）; 
让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问题。但不确定。如果有人能在这方面提供帮助，我真的很感激吗？如果需要更多信息，请告诉我。

谢谢。

解决方案

Leaflet CSS样式不适用于shadow DOM元素。

要使它工作，你需要在这里添加leaflet.css：

  // ... 
< link type =text / css =stylesheethref =https://unpkg.com/ leaflet@1.3.4/dist/leaflet.css> 
 
< p>我是x-foo的影子DOM子元素。< / p> 
 // ... ... 
  

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

UPDATE: I have now replicated this issue in Plunker. I did check the duplicate question suggested. The answer is incorrect or missing CSS file. I have imported v1.3.4 for CSS and JS as mentioned in leaflet quick start. The Plunker shows the CSS is included in Shadow DOM of the element. This is not the case for me. Also, the same version of JS and CSS works for non-polymer code, however, the distortion occurs with Polymer.

I am struggling for several days now to get the leaflet map loaded properly within Polymer 2. This issue is taking the soul out of me now. I have searched various threads in SO: this, Github: this, this and several other posts, unfortunately still could not fix the issue. Tested in both Chrome and Firefox. I have tried with Openlayers and the map loads perfectly. The issue arises when using Leaflet and Mapbox API. Unfortunately, due to customer requirements, cannot use Openlayers.

My map renders like this: Code fragments:

<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);
}

UPDATED Code:

<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();
}

I did try with inline CSS, putting JS in connectedcallback() & ready(), putting CSS in parent element etc.

I am assuming, there is some CSS problem given the posts that I read. But not sure. Would really appreciate if someone could help in this regard? Please let me know if more info is needed.

Thanks.

解决方案

Leaflet CSS styles are not applied to shadow DOM elements.

To make it work you need to add leaflet.css here:

// ...
<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>
// ...

Working example: https://plnkr.co/edit/CJUlwUnBezum9jgt93uF?p=preview

这篇关于小叶+聚合物2使用扭曲的瓷砖加载地图但是使用非聚合物代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！