传单以错误的顺序渲染TileMill瓷砖

15

我很困惑，很多搜索都没有帮助。

我处于最终将是具有三个栅格层和三个标记层的地图的第一步（带有在栅格及其关联数据之间切换的控件，以及用于数据的弹出窗口/工具提示），但我不能获取Tilemill瓷砖以正确渲染。（我在QGIS中创建了栅格，然后通过GDAL对栅格进行着色和重新投影，然后将其放入TileMill。）

智慧：在此处输入图片说明在Chrome中。这是Safari：

这是代码，对我来说似乎是无害的（此时，我已经注释掉了除了磁贴之外的所有内容，所以这就是我所包含的全部内容）：

<html>
<head>
 <title> - Leaflet demo</title>
 <script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
 <style type='text/css'>
 html, body{ width:100%; height: 100%, margin:0; padding:0; }
 #map{ width:700px; height:600px }
 img {margin:0px;padding:0px};
</style>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
//one base layer on map
var map = new L.Map( "map" ).setView([38.173,-94.384],5);
L.tileLayer('http://a.tiles.mapbox.com/v3/mtgmediagroup.beef2013/{z}/{x}/{y}.png', {
 attribution: 'Dani Friedland/MTG Media Group',
 maxZoom: 9
}).addTo(map);
</script>
</head>
<body>
<b>Map</b>
<div id="map"></div>
</body>
</html>

有没有人遇到过这个问题？如果是这样，您如何克服它？我渴望开始制作这张地图的其余过程（当然，我的意思是“发现下一个要解决的问题”）。

编辑添加：我尝试重新导出新的MBTiles文件，将其上传为新数据，并从该数据创建新的Mapbox项目。没有骰子。解决此问题的下一步是在服务器上设置MBTiles文件，跳过Mapbox，但这似乎比解决问题更有可能产生问题。

— 丹妮
source

27

您忘记添加Leaflet CSS：

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

您的代码中也有很多错别字：例如，在html, body{}样式表行中。在部署到生产之前，请先检查它们。

— 伊利亚·兹维列夫（Ilja Zverev）
source

1

您是完全正确的，然后就解决了！我只是知道那是愚蠢的。非常感谢你的帮助！！

— Dani

0

我知道这个问题很旧，已经解决了，但是对于目前遇到同样问题的任何人，我都有另一个解决方案。如果您已加载CSS，但CSS仍无法正确显示图块，则需要tms: true在TileLayer选项中添加该图块。

我的代码示例：

var mymap = L.map('mapid').setView([0, 0], 3)

L.tileLayer('http://localhost/map/MapData/sat/{z}/{x}/{y}.png', {
        minZoom: 1, maxZoom: 7,
        tms: true,
        attribution: 'World Map'
    }).addTo(mymap);

希望这可以帮助其他人解决同样的问题。

— 比吉克斯
source