Tờ rơi kết xuất các ô Xếp gạch theo thứ tự sai

14

Tôi đã bối rối, và khá nhiều tìm kiếm đã không có gì hữu ích.

Tôi đang ở bước đầu tiên, cuối cùng sẽ là một bản đồ với ba lớp raster và ba lớp đánh dấu (với các điều khiển để chuyển đổi giữa các raster và dữ liệu liên quan của chúng, với cửa sổ bật lên / chú giải công cụ cho dữ liệu), nhưng tôi không thể lấy gạch Tilemill để hiển thị đúng. (Tôi đã tạo các trình quét trong QGIS, chạy chúng qua GDAL để tô màu và chiếu lại chúng, sau đó đưa chúng vào TileMill.)

Để dí dỏm: nhập mô tả hình ảnh ở đây Đó là trong Chrome. Đây là Safari:

Và đây là mã, trông khá vô hại đối với tôi (Tôi đã nhận xét tất cả mọi thứ trừ các gạch tại thời điểm này, vì vậy đó là tất cả những gì tôi đã bao gồm):

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

Có ai từng gặp phải vấn đề này? Nếu vậy, làm thế nào bạn vượt qua nó? Tôi háo hức bắt đầu phần còn lại của quá trình tạo ra bản đồ này (tất nhiên ý tôi là "phát hiện ra vấn đề tiếp theo cần giải quyết").

Đã chỉnh sửa để thêm: Tôi đã thử xuất lại tệp MBTiles mới, tải lên dưới dạng dữ liệu mới và tạo dự án Mapbox mới từ dữ liệu đó. Không có con xúc xắc. Bước tiếp theo trong việc cô lập vấn đề sẽ là thiết lập tệp MBTiles trên máy chủ, bỏ qua Mapbox, nhưng điều đó dường như có khả năng tạo ra sự cố hơn là khắc phục chúng.

— Dani
nguồn

25

Bạn đã quên thêm CSS Tờ rơi:

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

Ngoài ra, có rất nhiều lỗi chính tả trong mã của bạn: ví dụ: trong html, body{}dòng biểu định kiểu. Hãy kiểm tra chúng trước khi triển khai vào sản xuất.

— Ilja Zverev
nguồn

1

Bạn hoàn toàn đúng, và điều đó đã quan tâm đến nó! Tôi chỉ biết đó là một thứ ngu ngốc như thế. Cảm ơn rất nhiều vì sự giúp đỡ của bạn!!

— Dani

0

Tôi biết câu hỏi này đã cũ và đã được giải quyết, nhưng tôi có một giải pháp khác cho bất cứ ai hiện đang có vấn đề tương tự. Nếu bạn đã tải CSS của mình và nó vẫn không hiển thị các ô chính xác, bạn cần đưa tms: truevào các tùy chọn Xếp lớp .

Một ví dụ về mã của tôi:

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

Hy vọng điều này sẽ giúp người khác với cùng một vấn đề.

— bijx
nguồn