在Electron中翻转Leaflet瓦片

Question

在Electron中翻转Leaflet瓦片

3

嘿，我是一个新手，想在Electron中使用Leaflet进行一些神奇的地图制作。

我根据基本示例创建了一个基本的Electron应用程序和index.js。我还添加了一个基本的index.html：

<!DOCTYPE html>
<html>

<head>

    <title>Page Title</title>

</head>

<body>
    <div id="map"></div>
</body>

<script>
    require('./renderer')
</script>

</html>

在renderer.js中的Leaflet相关内容

window.L = require('leaflet')

var map = L.map('map').setView([51.0420175, 13.7358889], 12)

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

当我运行应用程序时，窗口打开并显示一些地图瓦片。但它们并没有全部加载，并且当我重新调整窗口大小时它们会混乱不堪。

在这里是调整前的窗口：

以及调整后的窗口：

我的代码有什么问题？

- Trevirius

1

可能是Leaflet绘制瓦片不连续的重复问题。 - IvanSanchez

当我在头部添加<link rel="stylesheet" , href="./node_modules/leaflet/dist/leaflet.css">时，地图不再显示。 - Trevirius

2

灰色的“瓷砖不加载”地图，还是“我忘记设置地图容器的高度”导致地图不可见？ - IvanSanchez

之前已经做过了，100%没问题。容器的宽度和高度可以设置为可变的吗？ - Trevirius

1

100% 是指什么？ - IvanSanchez

1

我为 body 添加了 display:flex 并为地图容器添加了 flex:1，现在它能够按需工作了。谢谢你的帮助！ - Trevirius

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sirTris · Accepted Answer

我遇到了相同的问题。我认为最好的解决方案是：

bower install leaflet

然后将此内容用于您的.html文件的头部：

<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
<style>
  body { margin:0; padding:0;  }
  #map { position: absolute; top:0; bottom:0; right:0; left:0;  }
</style>