Відображення листівки плитки 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, але, схоже, це швидше створить проблеми, ніж їх виправити.

— Дани
джерело

27

Ви забули додати Leaflet CSS:

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

Також у вашому коді є численні помилки друку: наприклад, у html, body{}рядку таблиць стилів. Перевірте їх, перш ніж розміщувати у виробництві.

— Ілля Звєрєв
джерело

1

Ви абсолютно праві, і це подбали про це! Я просто знав, що це щось таке дурне. Дуже дякую за допомогу !!

— Дані

0

Я знаю, що це питання давнє і вже вирішене, але в мене є ще одне рішення для тих, хто зараз має це те саме питання. Якщо ви завантажили свій 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);

Сподіваюся, це допоможе комусь іншому з тим же питанням.

— bijx
джерело