TileMill döşemelerini yanlış sırayla oluşturma broşürü

15

Çok üzüldüm ve çok fazla arama yapmak yararlı bir şey yapmadı.

Nihayetinde üç raster katmanı ve üç işaretleyici katmanı (rasterler ve ilişkili veriler arasında geçiş yapmak için kontrollerle, veriler için pop-up / araç ipuçları ile) bir harita olacak ilk adımdayım, ancak yapamam Tilemill fayanslarının düzgün bir şekilde işlenmesini sağlayın. (QGIS'de rasterleri oluşturdum, onları renklendirmek ve yeniden yansıtmak için GDAL aracılığıyla çalıştırdım ve sonra TileMill'e koydum.)

Zekice: resim açıklamasını buraya girin Chrome'da. Bu Safari:

Ve işte bana oldukça zararsız görünen kod (bu noktada fayans dışında her şeyi yorumladım, bu yüzden dahil ettiklerim budur):

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

Hiç kimse bu sorunla karşılaştı? Eğer öyleyse, bunun üstesinden nasıl geldin? Bu haritayı yapma sürecinin geri kalanına başlamak için sabırsızlanıyorum (ki elbette "çözülecek bir sonraki sorunu ortaya çıkarmak").

Eklemek için düzenlendi: Yeni bir MBTiles dosyasını yeniden dışa aktarmayı, yeni veri olarak yüklemeyi ve bu verilerden yeni bir Mapbox projesi oluşturmayı denedim. Nafile. Sorunu izole etmenin bir sonraki adımı, MBTiles dosyasını bir sunucuda kurmak ve Mapbox'ı atlamak olacaktır, ancak bu sorunların düzeltilmesinden daha fazla sorun yarattığı görülmektedir.

— Dani
kaynak

27

Leaflet CSS eklemeyi unuttunuz:

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

Ayrıca kodunuzda çok sayıda yazım hatası vardır: örneğin, html, body{}stil sayfası satırında. Üretime başlamadan önce bunları kontrol edin.

— Ilja Zverev
kaynak

1

Kesinlikle haklısın ve bu halledildi! Bunun böyle aptalca bir şey olduğunu biliyordum . Yardımın için çok teşekkür ederim!!

— Dani

0

Bu sorunun eski ve zaten çözülmüş olduğunu biliyorum, ama şu anda aynı sorunu yaşayan herkes için başka bir çözümüm var. Eğer CSS yüklü ettik ve hala düzgün fayans yer almıyorsa, eklemek gerekir tms: truesenin içinde TileLayer seçenekleri.

Koduma bir örnek:

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

Umarım bu aynı sorunu olan başka birine yardımcı olur.

— bijx
kaynak