传单设置本地地图图块的路径脱机但不在线

时间:2015-03-23 17:21:39

标签: maps leaflet tile

我想离线使用地图图块。瓷砖由Maperitive制成。这是带有传单JS的HTML:

<!DOCTYPE HTML>
<html>
  <head>
    <title>map - test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

        <style>
            body {
                margin: 0;
                padding: 0;
            }
            html, body, #map {
                height: 100%;
                width: 100%;
            }
        </style>
</head>

<body>
    <div id="map">
        <script>

            var map = L.map('map', {
                maxZoom: 18,
                minZoom: 16,
                maxBounds: [
                    //south west
                    [47.918760313911896, 9.25198432059355],
                    //north east
                    [47.929235549307315, 9.26072925925386]
                ], 
            }).setView([47.923997931609605, 9.2563567899237054], 17);

            L.tileLayer('../img/tiles/{z}/{x}/{y}.png', {  
                tms: true // Do I need that?
            }) .addTo(map);

            L.marker([47.92458, 9.25630]) .addTo(map);

        </script>
    </div>        
  </body>
</html>

代码在我的计算机上脱机工作,但在我的服务器上不在线。带有图块的文件夹存储在服务器上。瓷砖的路径是正确的。

我的错是什么?

1 个答案:

答案 0 :(得分:0)

我找到了原因。

这不是代码。 tile-PNG导致403错误。我在Windows 8计算机上使用Maperitive渲染了瓷砖。然后我把它们转移到了Mac上。从那里我通过ftp将它们放在服务器上。

现在我将磁贴直接从Windows传输到服务器。 一切正常

Windows和Mac之间发生了什么破坏了PNG?