2012-04-30 20 views
1

OpenStreetMapsでOpenLayersを使用して、小さなGISアプリケーションを開発しています。写真を交換するときopenlayerで画像レイヤを表示する方法

map = new OpenLayers.Map('map',{ 
        eventListeners: { 
         "moveend": mapEvent, 
         "zoomend": mapEvent 
        } 
       }); 
    OpenLayers.Layer.OSM.Toolserver = OpenLayers.Class(OpenLayers.Layer.OSM, { 
     initialize: function(name, options) { 
      var url = [ 
       "http://a.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", 
       "http://b.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", 
       "http://c.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", 
       "http://d.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", 
       "http://e.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", 
       "http://f.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png" 
      ]; 
      options = OpenLayers.Util.extend({numZoomLevels: 19}, options); 
      OpenLayers.Layer.OSM.prototype.initialize.apply(this, [name, url, options]); 
     }, 
     CLASS_NAME: "OpenLayers.Layer.OSM.Toolserver" 
    }); 
    l1=new OpenLayers.Layer.OSM.Toolserver('osm-labels-de', {isBaseLayer: false, visibility: true}); 
    l2=new OpenLayers.Layer.OSM.Toolserver('osm-no-labels', {isBaseLayer: true, visibility: true}); 
    var pic = new OpenLayers.Layer.Image(
    'shot', 
    'shot.jpg', 
    new OpenLayers.Bounds(13.409460,52.5207532,13.469466,52.5407532), new OpenLayers.Size(100, 100), 
    {alwaysInRange:true,isBaseLayer: false,transparent: true, visibility: true,numZoomLevels : 3 } 
); 
    map.addLayers([pic,l1,l2]); 
    map.setCenter(new OpenLayers.LonLat(13.409460,52.5207532).transform(
      new OpenLayers.Projection("EPSG:4326"), 
      map.getProjectionObject() 
     ),10); 

レイヤー「PICは」(レイヤー「L1」と「L2」の間に表示されます: イメージオーバーレイはisBaseLayerがfalseに設定されている場合は、ここに私のコードは動作していないようですKMLレイヤではうまくいきます) - しかしどこにも現れません - 座標の問題なのかどうかはわかりません。

問題は、1つのベースレイヤー "l2"に単純化し、その上に "pic"を重ねて表示することができます。これはどちらでもできません。

私はこの例をhttp://openlayers.org/dev/examples/image-layer.htmlに見ましたが、画像はベースレイヤーです - isBaseLayerをfalseに設定すると画像が消えます。ベースレイヤーになるようにイメージを設定するのは本当に気になりませんが、そうした場合は、イメージのみが表示され、マップはもうありません。

ご協力いただきありがとうございます。

答えて

2

私はかなりの問題は、 '写真'レイヤーの境界の変換の欠如であると確信しています。 コードでは、transformメソッドを使用してマップセンターを設定します。あなたは 'pic'層の境界のためにそれを使う必要があります。

// World Geodetic System 1984 projection (lon/lat) 
    var projWGS84 = new OpenLayers.Projection("EPSG:4326"); 

    var options = { 
     opacity: 1.0, 
     isBaseLayer: false, 
     numZoomLevels: 20 
    }; 

    var extent = new OpenLayers.Bounds(WEST,SOUTH,EAST,NORTH) 
     .transform(projWGS84, map.getProjectionObject()); 

    var imageLayer = new OpenLayers.Layer.Image('Image Layer', 
     'http://i.i.com.com/cnwk.1d/i/tim/2012/04/19/20120419_Java_Duke_mascot_001_610x418.jpg', 
     extent, 
     new OpenLayers.Size(1,1), 
     options); 

私は、地図上の画像層を設定するために使用するコードをチェックアウトしてください

関連する問題