লিফলেটটি ভুলভাবে ক্রমবর্ধমান টাইলমিল টাইলস

15

আমি স্ট্যাম্পড, এবং বেশিরভাগ অনুসন্ধানে কোনও সহায়ক হয়নি।

আমি শেষ পর্যন্ত তিনটি রাস্টার স্তর এবং চিহ্নিতকারীগুলির তিনটি স্তর (রেস্টার এবং তাদের সম্পর্কিত ডেটার মধ্যে পপআপ / সরঞ্জামদণ্ডগুলির সাথে পপআপস / টুলটিপসের সাথে টগল করার নিয়ন্ত্রণ সহ) সহ একটি মানচিত্র হয়ে উঠব তা সম্পর্কে আমি প্রথম ধাপে রয়েছি, তবে আমি পারি না টাইলমিল টাইলস সঠিকভাবে রেন্ডার করতে পান। (আমি কিউজিআইএস-এ রেস্টারদের তৈরি করেছি, তাদের রঙিন করতে এবং পুনরায় প্রজেক্ট করতে জিডিএল এর মাধ্যমে তাদের চালিয়েছি এবং তারপরে সেগুলি টাইলমিল এ রেখেছি))

বুদ্ধিমানভাবে: এখানে চিত্র বর্ণনা লিখুন এটি ক্রোমে রয়েছে। এটি সাফারি:

এবং এখানে কোডটি, যা আমার কাছে বেশ নির্দোষ দেখাচ্ছে (আমি এই মুহুর্তে টাইলস ব্যতীত সমস্ত মন্তব্য করেছি, তাই আমি এগুলিই অন্তর্ভুক্ত করেছি):

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

কেউ কি কখনও এই সমস্যার মুখোমুখি হয়েছেন? যদি তা হয় তবে কীভাবে আপনি এটি কাটিয়ে উঠলেন? আমি এই মানচিত্রটি তৈরির বাকি প্রক্রিয়াটি শুরু করতে আগ্রহী (অবশ্যই বলতে চাইছি "পরবর্তী সমস্যার সমাধানের সমাধান করা")।

যুক্ত করার জন্য সম্পাদিত: আমি একটি নতুন এমবিটিলেস ফাইলটি পুনরায় রফতানি করার চেষ্টা করেছি, এটিকে নতুন ডেটা হিসাবে আপলোড করেছি এবং সেই ডেটা থেকে একটি নতুন ম্যাপবক্স প্রকল্প তৈরি করেছি। কোন পাশা. সমস্যাটি বিচ্ছিন্ন করার পরবর্তী পদক্ষেপটি হ'ল ম্যাপবক্সটি এড়িয়ে একটি সার্ভারে এমবিটাইজস ফাইল সেটআপ করা হবে, তবে এগুলি সমাধানের চেয়ে সমস্যা তৈরি হওয়ার সম্ভাবনা বেশি বলে মনে হয়।

— দানি
সূত্র

27

আপনি লিফলেট সিএসএস যুক্ত করতে ভুলে গেছেন:

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

এছাড়াও আপনার কোডে অসংখ্য টাইপ রয়েছে: উদাহরণস্বরূপ, html, body{}স্টাইলশীট লাইনে। উত্পাদনে মোতায়েনের আগে তাদের পরীক্ষা করে দেখুন।

— ইলজা জাভেরেভ
সূত্র

1

আপনি একেবারে ঠিক বলেছেন, এবং এটি যত্ন নিয়েছে! আমি কেবল জানতাম এটি এমন কিছু বোকা। আপনার সাহায্যের জন্য আপনাকে অনেক ধন্যবাদ!!

— দানি

0

আমি জানি এই প্রশ্নটি পুরানো এবং ইতিমধ্যে সমাধান হয়ে গেছে, তবে বর্তমানে যিনি বর্তমানে এই একই সমস্যাটি নিয়ে আসছেন তার কাছে আমার আরও একটি সমাধান রয়েছে। আপনি যদি 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
সূত্র