TileMillタイルを間違った順序でレンダリングするリーフレット

14

私は困惑しており、かなりの数の検索が役に立たなかった。

最終的には3つのラスターレイヤーと3つのマーカーレイヤー（ラスターとその関連データを切り替えるコントロール、データのポップアップ/ツールチップを含む）を含むマップの最初のステップにいますが、できません。 Tilemillタイルを取得して適切にレンダリングします。（ラスターを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プロジェクトを作成しようとしました。サイコロなし。問題を特定するための次のステップは、Mapboxをスキップしてサーバー上にMBTilesファイルをセットアップすることですが、それはそれらを修正するよりも問題を引き起こす可能性が高いようです。

— ダニ
ソース

25

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
ソース