การแสดงผลแผ่นพับ TileMill เรียงลำดับผิด

15

ฉันนิ่งงันและการค้นหาจำนวนมากไม่ได้มีประโยชน์อะไรเลย

ฉันอยู่ในขั้นตอนแรกของสิ่งที่ในที่สุดจะเป็นแผนที่ที่มีสามชั้นแรสเตอร์และสามชั้นของเครื่องหมาย (พร้อมการควบคุมเพื่อสลับระหว่าง rasters และข้อมูลที่เกี่ยวข้องกับป๊อปอัป / เคล็ดลับเครื่องมือสำหรับข้อมูล) แต่ฉันไม่สามารถ รับไทล์มิลล์เพื่อแสดงอย่างถูกต้อง (ฉันสร้าง rasters ใน 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 แต่ดูเหมือนว่าจะสร้างปัญหาได้มากกว่าการแก้ไข

— Dani
แหล่งที่มา

27

คุณลืมเพิ่ม CSS ของ Leaflet:

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

นอกจากนี้ยังมีข้อผิดพลาดมากมายในรหัสของคุณเช่นในhtml, body{}บรรทัดสไตล์ชีท ตรวจสอบก่อนที่จะปรับใช้กับการผลิต

— Ilja Zverev
แหล่งที่มา

1

คุณพูดถูกและก็ดูแลมันด้วย! ฉันเพิ่งรู้ว่ามันเป็นสิ่งที่โง่เช่นนั้น ขอบคุณมากสำหรับความช่วยเหลือของคุณ!!

— Dani

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
แหล่งที่มา