Листовка, отображающая плитки TileMill в неправильном порядке

15

Я в тупике, и довольно много поисков ничего не помогло.

Я на первом этапе того, что в конечном итоге будет картой с тремя растровыми слоями и тремя слоями маркеров (с элементами управления для переключения между растрами и связанными с ними данными, с всплывающими окнами / всплывающими подсказками для данных), но я не могу получите плитки Tilemill для правильного рендеринга. (Я создал растры в QGIS, провел их через GDAL, чтобы раскрасить и перепроектировать их, а затем поместил их в TileMill.)

Для остроумия: введите описание изображения здесь это в Chrome. Это сафари: введите описание изображения здесь

А вот код, который для меня выглядит совершенно безобидным (на данный момент я закомментировал все, кроме плиток, так что это все, что я включил):

<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, но, скорее всего, это создаст проблемы, а не исправит их.

raster javascript leaflet tilemill browser Дани
источник

Ответы:

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
источник