Question

是否可以拥有由自定义图像拼接组成的图层？

我只能通过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.Layer

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

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

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

Answer 1

您是否尝试过Zoomify图层？这是example。它允许您在地图中加载来自给定目录的所有图像，以{z}-{x}-{y}.jpg形式命名，其中{z}是缩放级别。

Answer 2

如果你需要将图像分解成更小的图块，我建议使用这个免费的MapTiler软件，它会根据需要为多个缩放级别创建图块。

您可以使用TMS图层创建图像切片的地图图层：

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

TMS图层使用getTileURL函数查找要显示的平铺图像。此函数假定图像存储在层次结构中，如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;
}

OpenLayers - 在一个图层上自定义图像的马赛克

2 个答案: