Leaflet flipping tiles in electron

家住魔仙堡 提交于 2019-12-23 17:04:06

问题


Hey im new to electron but i want to use Leaflet inside it to some magic mapping stuff.

I created an basic electron application with the index.js according to the basic example. I added also an basic index.hetml:

<!DOCTYPE html>
<html>

<head>

    <title>Page Title</title>

</head>

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

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

</html>

And the Leaflet stuff inside the renderer.js

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

When I'm running the app the window is opening and also some MapTiles are displayed. But they they are not all loaded and they get messed up when im reseizing the window:

and

What's wrong with my code?


回答1:


I ran into the same problem. I think the best solution is to

bower install leaflet

and than use this in the head of your .html file:

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


来源:https://stackoverflow.com/questions/50586793/leaflet-flipping-tiles-in-electron

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!