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

OpenLayers - Mosaic of custom images on one layer

本文关键字：一层 马赛克 自定义 图像 OpenLayers-      更新时间：2023-09-26

有可能有一个由自定义图像马赛克组成的层吗？

我只能通过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'
  }
);

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

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

您可以使用TMS layer:创建图像平铺的地图层

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;
}
相关文章：