Плитки в неправильной проекции? (mbtiles mbutil openlayers.tms)

У меня возникли проблемы с моим проектом для мойки плитки на мой веб-сервер и с использованием OpenLayers для рисования моей карты.Плитки в неправильной проекции? (mbtiles mbutil openlayers.tms)

Мы используем tilemill стилизовать карту> mbtiles экспорт> mbutil в каталог> openlayers.tms

Я прилагается ниже код, который мы используем, который является модификацией OpenLayers.TMS примера ,

Вот ссылка на мою карту, и вы увидите проблему, из первых рук:

MAP

<!DOCTYPE html> 
<html> 
<head> 
<title>OpenLayers Tiled Map Service Example</title> 
<script src="../lib/OpenLayers.js"></script> 
<script type="text/javascript"> 
    var lon = 0; 
    var lat = 0; 
    var zoom = 0; 
    var map, layer; 

    function init(){ 
     OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/"; 
     map = new OpenLayers.Map('map', {maxResolution:1.40625/2}); 
     layer = new OpenLayers.Layer.TMS("ttc", 
       "http://wrimaptube.nfshost.com/ttctiles3/", {layername: 'ttc3', type:'png'}); 
     map.addLayer(layer); 
     map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); 
    } 
    function addTMS() { 
     l = new OpenLayers.Layer.TMS(
      OpenLayers.Util.getElement('layer').value, 
      OpenLayers.Util.getElement('url').value, 
      { 
       'layername': OpenLayers.Util.getElement('layer').value, 
       'type': OpenLayers.Util.getElement('type').value 
     }); 
     map.addLayer(l); 
     map.setBaseLayer(l); 
    } 
</script> 
</head> 
<body onload="init()"> 
<div id="map" style='width: 1024px; height : 500px;'> 
</div> 
</body> 
</html>

предложения?

Спасибо большое,

Майкл

источник

2011-07-13 Michael

так что конкретно проблема? все, кажется, работает нормально, за исключением того, что вы получаете розовые плитки вне мира и после определенного уровня масштабирования. похоже, проблема в том, что изображения отсутствуют. – igorti

Розовые плитки просят заполнить плитки, расположенные на сервере ... однако, размер карты - это одиночная плитка (при уровне масштабирования 0). Я должен был упомянуть, что я не отображал уровни масштабирования> 1. – Michael

Пример TMS, http://openlayers.org/dev/examples/tms.html отображает мир, который по-разному проецируется, чем моя карта из плитки. – Michael

Фиксированные его, используя код по следующему адресу: http://wiki.openstreetmap.org/wiki/Talk:Openlayers_POI_layer_example

Вот что код выглядит для моего MAP:

<html> 
<head> 
<title>Markieta</title> 
<script src="http://www.openlayers.org/api/OpenLayers.js"></script> 
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script> 
<script type="text/javascript"> 

    var map; 

      function osm_getTileURL(bounds) { 

      var res = this.map.getResolution(); 

      var x = Math.round((bounds.left - this.maxExtent.left)/(res * this.tileSize.w)); 
      var y = Math.round((this.maxExtent.top - bounds.top)/(res * this.tileSize.h)); 
      var z = this.map.getZoom(); 
      var limit = Math.pow(2, z); 

      // ---- 

      if (y < 0 || y >= limit) { 
        return OpenLayers.Util.getImagesLocation() + "404.png"; 
       } else { 
        x = ((x % limit) + limit) % limit; 
       //alert(this.url + z + "/" + x + "/" + y + "." + this.type); 
        return this.url + z + "/" + x + "/" + y + "." + this.type; 
       } 
    } 

    function init() { 
      var options = { 
      projection: new OpenLayers.Projection("EPSG:900913"), 
      displayProjection: new OpenLayers.Projection("EPSG:4326"), 
      units: "m", 
      numZoomLevels: 18, 
      maxResolution: 156543.0339, 
      maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 
              20037508, 20037508.34) 
     }; 
     var navigation_control = new OpenLayers.Control.Navigation({}); 
     var controls_array = [ 
     navigation_control, 
     new OpenLayers.Control.PanZoomBar({}), 
     new OpenLayers.Control.LayerSwitcher({}), 
     new OpenLayers.Control.Permalink(), 
     new OpenLayers.Control.MousePosition({}) 
    ]; 

     OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/"; 

     map = new OpenLayers.Map('map', options, { 
     controls: controls_array 
    }); 

     var layer = new OpenLayers.Layer.TMS(
      "Markieta", 
      "http://markieta.nfshost.com/ttctiles7/", {layername: 'ttc7', type: 'png'} 
     ); 

     map.addLayer(layer); 

     if(!map.getCenter()){ 
     map.setCenter(new OpenLayers.LonLat(-8835000,5427500),11); 
    } 
} 

</script> 
</head> 
<body onload="init();"> 
<div id="map"></div> 
<style type="text/css"> 
     body { 
      margin: 0; 
     } 
     #map { 
      width: 100%; 
      height: 100%; 
     } 

     #text { 
      position: absolute; 
      bottom: 1em; 
      left: 1em; 
      width: 512px; 
     } 
</style> 
</div> 
</body> 
</html>

Однако , У меня все еще возникают проблемы с классом OpenLayers.Controls ... Я оставлю это еще на один день. (как вы можете видеть, panzoombar, layerwitcher, permalink и mouseposition не создаются.)

источник

2011-07-14 06:31:48 Michael

Если у меня есть значение google map long-lat. Как я могу пометить его на карте, опубликованной с помощью вышеуказанного метода? – ratata

Плитки в неправильной проекции? (mbtiles mbutil openlayers.tms)

ответ

Смежные вопросы