Javascript OpenLayers-在一个图层上镶嵌自定义图像

有可能有一个由自定义图像拼接而成的图层吗

我只能通过

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

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

OpenLayers.Tile

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)
);

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'
  }
);

OpenLayers.Tile.Image

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)
);

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'
  }
);

---

如果你需要将图像分割成更小的分幅，我建议你使用这个免费软件，它可以根据你的需要创建任意多个缩放级别的分幅

您可以使用TMS层创建图像分幅的贴图层：

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

TMS层使用

getTileURL

函数查找要显示的平铺图像。此函数假定图像存储在与创建的图像类似的层次结构中。
例如：img/tiles/7/4/1.png是缩放级别7左侧第五、底部第二的图像

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;
}

---

如果你需要将图像分割成更小的分幅，我建议你使用这个免费软件，它可以根据你的需要创建任意多个缩放级别的分幅

您可以使用TMS层创建图像分幅的贴图层：

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

TMS层使用

getTileURL

函数查找要显示的平铺图像。此函数假定图像存储在与创建的图像类似的层次结构中。
例如：img/tiles/7/4/1.png是缩放级别7左侧第五、底部第二的图像

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;
}

---

你试过缩放图层吗？这是我的建议。它允许您在地图中加载给定目录中的所有图像，命名形式为

{z}-{x}-{y}.jpg

，其中

{z}

是缩放级别。

您尝试过缩放图层吗？这是我的建议。它允许您在地图中加载给定目录中的所有图像，命名形式为

{z}-{x}-{y}.jpg

，其中

{z}

是缩放级别。

您知道这一点吗？您是否试图在网格中显示实际不是单个图像平铺的任意图像？我正在尝试这样做，因为我正在使用OpenLayers来完成一些与地图/地理信息系统完全无关的事情，我想知道如果不以一种有趣的方式命名文件，这是否是可能的/需要的。你知道这一点吗？您是否试图在网格中显示实际不是单个图像平铺的任意图像？我正在尝试这样做，因为我正在使用OpenLayers来完成一些与maps/GIS完全无关的事情，我想知道如果不以一种有趣的方式命名文件，这是否是可能的/需要的。