전단지 렌더링 TileMill 타일을 잘못된 순서로

15

나는 혼란에 빠졌고, 많은 검색이 도움이되지 못했습니다.

나는 궁극적으로 3 개의 래스터 레이어와 3 개의 마커 레이어가있는 맵의 첫 단계에 있습니다 (래스터와 관련 데이터 사이를 전환하는 컨트롤, 데이터의 팝업 / 툴팁 포함) Tilemill 타일을 올바르게 렌더링합니다. (QGIS에서 래스터를 만들고 GDAL을 통해 래스터를 실행하여 색상을 지정하고 다시 투영 한 다음 TileMill에 넣었습니다.)

재치 : 여기에 이미지 설명을 입력하십시오 그것은 크롬에 있습니다. 사파리입니다.

그리고 여기에 나에게 무해한 코드가 있습니다 (이 시점에서 타일 이외의 모든 것을 주석 처리 했으므로 포함 시켰습니다).

<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를 건너 뛰는 것이지만 문제를 해결하는 것보다 문제를 일으키는 것 같습니다.

— 다니
소스

27

Leaflet CSS를 추가하는 것을 잊었습니다 :

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

또한 코드에는 수많은 오타가 있습니다 (예 : html, body{}스타일 시트 행). 프로덕션 환경에 배포하기 전에 확인하십시오.

— 일자 즈 베레 프
소스

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