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

问题描述

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

<style include="shared-styles publish-project-styles">:主持人 {显示:块；填充:20px；}#mapContainer{宽度:100%；高度:400px；边框:1px 实心#0A569D；}.传单容器{宽度:100%；高度:400px；边框:1px 实心#0A569D；}</风格><td id="leftContainer" width="50%" style="padding: 15px;"><div id="mapContainer"></div><!-- <canvas id="mapContainer" style="width: 400px; height: 400px; 边框: 1px solid #0A569D;"></canvas>--></td>准备好() {super.ready();让leafmap = L.map(this.$.mapContainer).setView([48.84, 2.3], 5);L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {最大缩放:18}).addTo(leafmap);}

更新代码:

<style include="shared-styles publish-project-styles">:主持人 {显示:块；填充:20px；}#mapContainer{宽度:100%；高度:400px；边框:1px 实心#0A569D；}.传单容器{宽度:100%；高度:400px；边框:1px 实心#0A569D；}</风格><td id="leftContainer" width="50%" style="padding: 15px;"><div id="mapContainer"></div><!-- <canvas id="mapContainer" style="width: 400px; height: 400px; 边框: 1px solid #0A569D;"></canvas>--></td>连接回调(){super.connectedCallback();让leafmap = L.map(this.$.mapContainer).setView([48.84, 2.3], 5);L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {最大缩放:18}).addTo(leafmap);叶图.invalidateSize();}

我确实尝试过使用内联 CSS，将 JS 放入 connectedcallback() &ready()，将 CSS 放入父元素等.

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

谢谢.

解决方案

Leaflet CSS 样式不适用于阴影 DOM 元素.

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

//...<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"><p>我是 x-foo 的 shadow 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

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