Renderowanie ulotki Płytki TileMill w niewłaściwej kolejności

15

Jestem zakłopotany i całkiem sporo poszukiwań nie przyniosło nic pomocnego.

Jestem na pierwszym etapie tego, co ostatecznie będzie mapą z trzema warstwami rastrowymi i trzema warstwami znaczników (z kontrolkami do przełączania między rastrami i powiązanymi z nimi danymi, z wyskakującymi oknami / podpowiedziami dla danych), ale nie mogę spraw, aby płytki Tilemill były poprawnie renderowane. (Stworzyłem rastry w QGIS, przepuściłem je przez GDAL, aby je pokolorować i ponownie wyświetlić, a następnie umieściłem w TileMill.)

To znaczy: wprowadź opis zdjęcia tutaj To jest w Chrome. To jest Safari:

A oto kod, który wydaje mi się dość nieszkodliwy (w tym momencie skomentowałem wszystko oprócz kafelków, więc to wszystko, co zawarłem):

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

Czy ktoś kiedykolwiek napotkał ten problem? Jeśli tak, to jak to pokonałeś? Z chęcią rozpocznę resztę procesu tworzenia tej mapy (przez co oczywiście mam na myśli „odkrywanie następnego problemu do rozwiązania”).

Edytowano, aby dodać: Próbowałem ponownie wyeksportować nowy plik MBTiles, załadować go jako nowe dane i utworzyć nowy projekt Mapbox na podstawie tych danych. Nie ma kości. Następnym krokiem w izolacji problemu jest skonfigurowanie pliku MBTiles na serwerze, pomijając Mapbox, ale wydaje się, że bardziej prawdopodobne jest stworzenie problemów niż ich naprawienie.

— Dani
źródło

27

Zapomniałeś dodać Ulotki CSS:

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

W kodzie znajduje się także wiele literówek: na przykład w html, body{}linii arkusza stylów. Sprawdź je przed wdrożeniem do produkcji.

— Ilja Zverev
źródło

1

Masz absolutną rację i to załatwiło sprawę! Po prostu wiedziałem, że to coś takiego głupiego. Dziękuję bardzo za Twoją pomoc!!

— Dani

0

Wiem, że to pytanie jest stare i zostało już rozwiązane, ale mam inne rozwiązanie dla każdego, kto obecnie ma ten sam problem. Jeśli masz załadowany CSS i nadal nie wyświetla poprawnie kafelków, musisz uwzględnić tms: truew opcjach TileLayer .

Przykład mojego kodu:

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

Mam nadzieję, że to pomoże komuś innemu z tym samym problemem.

— bijx
źródło