पत्रक गलत क्रम में टाइल टाइल टाइल प्रतिपादन

15

मैं स्तब्ध हूं, और काफी खोज ने कुछ भी मददगार नहीं बनाया है।

मैं इस बात के पहले कदम पर हूं कि आखिरकार तीन रास्टर लेयर्स और मार्करों की तीन परतों के साथ एक नक्शा होगा (चूहों के बीच नियंत्रण और उनके संबंधित डेटा के साथ टॉगल करने के लिए, डेटा के लिए पॉपअप / टूलटिप्स के साथ), लेकिन मैं नहीं कर सकता ठीक से रेंडर करने के लिए टिलमिल टाइल्स प्राप्त करें। (मैंने QGIS में आपदाओं का निर्माण किया, उन्हें GDAL के माध्यम से रंगने और फिर से प्रोजेक्ट करने के लिए दौड़ाया, और फिर उन्हें टाइलमिल में डाल दिया।)

बुद्धि के लिए: यहाँ छवि विवरण दर्ज करें यह क्रोम में है। यह सफारी है:

और यहाँ कोड है, जो मुझे बहुत ही अहानिकर लगता है (मैंने इस बिंदु पर सब कुछ लेकिन टाइलों पर टिप्पणी की है, इसलिए यह सब मैंने शामिल किया है):

<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 फ़ाइल स्थापित करना होगा, लेकिन इससे उन्हें ठीक करने की तुलना में समस्याएं पैदा होने की अधिक संभावना है।

— दानी
स्रोत

27

आप USC CSS जोड़ना भूल गए:

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

आपके कोड में भी कई टाइपो हैं: उदाहरण के लिए, html, body{}स्टाइलशीट लाइन में। उत्पादन के लिए तैनात करने से पहले उनके लिए जाँच करें।

— इलाजा ज्वेरेव
स्रोत

1

आप बिलकुल सही हैं, और इसने इसका ध्यान रखा! मुझे सिर्फ इतना पता था कि यह कुछ मूर्खतापूर्ण है। आपकी मदद के लिए बहुत बहुत धन्यवाद!!

— दानी

0

मुझे पता है कि यह सवाल पुराना है और पहले से ही हल हो गया है, लेकिन मेरे पास किसी और के लिए एक और समाधान है जो वर्तमान में यह एक ही मुद्दा है। यदि आपने अपने CSS में लोड किया है और यह अभी भी टाइल्स को सही तरीके से प्रदर्शित नहीं कर रहा है, तो आपको tms: trueअपने टाइललेयर विकल्पों में शामिल करने की आवश्यकता है ।

मेरे कोड का एक उदाहरण:

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
स्रोत