1

カスタム画像のモザイクで構成されたレイヤーを持つことは可能ですか?

を介して、特定のレイヤーで単一のカスタム画像しか取得できませんでしたOpenLayers.Layer.Image。基本的に、特定のレイヤーのタイルにカスタム イメージを指定する方法を見つけることができれば、問題は解決します。

OpenLayers.Tile、OpenLayers.Tile.Image、OpenLayers.Layerおよびのさまざまな組み合わせを試しOpenLayers.Layer.Gridましたが、うまくいきませんでした。

私が従う基本的な流れは次のとおりです。

var map = new OpenLayers.Map('map');

var layer = new <OpenLayers.Layer | OpenLayers.Layer.Grid> (<parameters>);

var tile1 = new <OpenLayers.Tile | OpenLayers.Tile.Image> (<parameters>);

map.addLayer(layer);

map.zoomToMaxExtent();

各コンストラクターを初期化する方法の具体例を以下に示します。

に関してOpenLayers.Layer.Gridは、実際には url および params コンストラクターのパラメーターに何を指定すればよいかわかりません。

これが機能するかどうか、および/または私が正しい軌道に乗っているかどうかについてのアドバイスをいただければ幸いです。

OpenLayers.レイヤー

var layer = new OpenLayers.Layer(
  'layer_name',
  {
    isBaseLayer: true
  }
);

OpenLayers.Layer.Grid

var layer = new OpenLayers.Layer.Grid(
  'layer_name',
  ?url?,
  ?params?
);

OpenLayers.タイル

var layer = new OpenLayers.Tile(
  layer_name,
  new OpenLayers.Pixel(0,0),
  new OpenLayers.Bounds(-1,-1,1,1),
  'square1.jpg',
  new OpenLayers.Size(300,300)
);

OpenLayers.Tile.Image

var layer = new OpenLayers.Tile.Image(
  layer_name,
  new OpenLayers.Pixel(0,0),
  new OpenLayers.Bounds(-1,-1,1,1),
  new OpenLayers.Size(300,300),
  {
    url: 'square1.jpg'
  }
);
4

2 に答える 2

1

Zoomifyレイヤーを試しましたか？これが例です。形式で名前が付けられた特定のディレクトリからすべての画像をマップにロードできます。{z}-{x}-{y}.jpgここ{z}で、 はズーム レベルです。

于 2012-10-01T08:16:29.003 に答える
0

画像を小さなタイルに分割する必要がある場合は、この無料の MapTilerソフトウェアを使用することをお勧めします。これは、必要なズーム レベルのタイルを作成します。

TMS レイヤーを使用して、画像タイルのマップ レイヤーを作成できます。

var layer = new OpenLayers.Layer.TMS("TMS Layer","",
    {url: '', serviceVersion: '.', layername: '.', alpha: true,
     type: 'png', getURL: getTileURL 
    }
);
map.addLayer(layer);

このgetTileURL関数は、表示するタイル画像を見つけるために TMS レイヤーによって使用されます。この関数は、画像がMapTilerによって作成されたような階層構造に格納されていることを前提としています。
例: img/tiles/7/4/1.png は、ズーム レベル 7 の左から 5 番目、下から 2 番目の画像です。

function getTileURL(bounds) 
{
    var res = this.map.getResolution();
    var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
    var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
    var z = this.map.getZoom();

    var path = "img/tiles/" + z + "/" + x + "/" + y + "." + this.type;
    var url = this.url;
    if (url instanceof Array) 
    {
        url = this.selectUrl(path, url);
    }
    return url + path;
}
于 2012-09-20T16:05:24.303 に答える