如何处理TileMill和Mapbox的Mbutil Export

时间:2011-04-06 16:01:52

标签: openlayers

嘿所有人。我只想弄清楚如何使用我的mbtile目录导出。我的文件位于本地目录“/ mytiles”中。如何配置此项以使用我的自定义图层?

  <head>
    <script src="http://www.openlayers.org/dev/OpenLayers.js"></script>
    <script type="text/javascript">

      var map;
      OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
      OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
      function init(){

        // Customize the values below to change the tileset.
        // This information is available on each tileset page.
        var layername = 'world-light';
        var file_extension = 'png';

        // Build the map
        var options = {
          projection: new OpenLayers.Projection("EPSG:900913"),
          displayProjection: new OpenLayers.Projection("EPSG:4326"),
          units: "m",
          numZoomLevels: 12,
          maxResolution: 156543.0339,
          maxExtent: new OpenLayers.Bounds(
            -20037500,
            -20037500,
            20037500,
            20037500
          )
        };
        map = new OpenLayers.Map('map', options);

        // Layer definitions
        var layer = new OpenLayers.Layer.TMS(
          "MapBox Layer",
          [ "http://a.tile.mapbox.com/","http://b.tile.mapbox.com/",
            "http://c.tile.mapbox.com/","http://d.tile.mapbox.com/" ],
          { 'layername': layername, 'type': file_extension }
        );

        // Add layers to the map
        map.addLayers([ layer ]);

        // Set the map's initial center point
        map.setCenter(new OpenLayers.LonLat(0, 0), 1);
      }

    </script>
  </head>
  <body onload="init()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>

1 个答案:

答案 0 :(得分:2)

首先,请参阅包含http://a.tile.mapbox.com/的代码部分。将其替换为您计算机的主机名或本地名称 - 可能是http://localhost/http://mycomputer.com/等。然后将layername替换为图层名称。

由于这是使用TMS图层,因此您需要创建一个名为1.0.0的目录,它位于这两件事之间 - 如果它们位于此处,您需要将图块移动到那里一个名为mydirectory的目录。结果就像http://localhost/1.0.0/mydirectory

因此,如果图块的网址为http://localhost/1.0.0/mydirectory/0/0/0.png,则您有

var layer = new OpenLayers.Layer.TMS(
  "MapBox Layer",
  [ "http://localhost/" ],
  { 'layername': 'mydirectory', 'type': 'png' }
);

您可以查阅OpenLayers.org TMS以获取图层类型的完整文档。