使用ol / tilegrid / TileGrid确定范围和缩放级别的图块URL

Question

我正在研究一个项目，以使CDN上缓存的特定图块无效。与GWC API相似，我想指定缩放级别和范围，以便为TMS，WMTS和XYZ磁贴生成URL。我提供的URL模板仅需要替换z，x和y值。但是我没有得到预期的图块坐标。测试失败的项目位于以下位置：https://github.com/timkeane/tile-urls。该项目包含一个map.html页面，展示了每个API的预期图块。

代码：

const grid = require('ol/tilegrid').createXYZ()

const populateTemplate = (template, zxy) => {
  let url = template
  zxy.forEach((n, i) => {
    url = url.replace(new RegExp(`\\$\\{${i}\\}`, 'g'), n)
  })
  return url
}

const invert = (tileCoord, templates, urls) => {
  const inverted = [tileCoord[0], tileCoord[1], Math.pow(2, tileCoord[0]) - tileCoord[2] - 1]
  templates.forEach(template => {
    urls.push(populateTemplate(template, inverted))
  })
}

const xyz = (tileCoord, templates, urls) => {
  templates.forEach(template => {
    urls.push(populateTemplate(template, tileCoord))
  })
}

module.exports = (request, response) => {
  const urls = {tms: [], wmts: [], xyz: []}
  const params = request.body
  const templates = params.templates
  for (let z = params.minz; z <= params.maxz; z++) {
    grid.forEachTileCoord(params.extent, z, tileCoord => {
      invert(tileCoord, templates.tms, urls.tms)
      invert(tileCoord, templates.wmts, urls.wmts)
      xyz(tileCoord, templates.xyz, urls.xyz)
    })
  }
  response.json(urls)
}

测试：

const $ = require('jquery')
const getUrls = require('../urls')
const mockResponse = require('./response.mock')

const request = {
  minz: 17,
  maxz: 17,
  extent: [-8236292.332456007, 4967101.816542972, -8235814.601029224, 4967310.82404219], 
  templates: {
    tms: ['https://maps.nyc.gov/tms/1.0.0/carto/basemap/${0}/${1}/${2}.jpg'],
    wmts: ['https://maps.nyc.gov/wmts/1.0.0/?layer=basemap&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix=EPSG%3A900913%3A${0}&TileCol=${1}&TileRow=${2}'],
    xyz: ['https://maps.nyc.gov/xyz/1.0.0/carto/basemap/${0}/${1}/${2}.jpg']
  }
}

beforeEach(() => {
  mockResponse.reset()
})

test('tms urls', () => {
  expect.assertions(7)

  getUrls({body: request}, mockResponse)

  const urls = mockResponse.json.mock.calls[0][0].tms
  console.warn(urls);

  expect(urls.length).toBe(6)
  expect($.inArray('https://maps.nyc.gov/tms/1.0.0/carto/basemap/17/38598/81782.jpg', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/tms/1.0.0/carto/basemap/17/38597/81782.jpg', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/tms/1.0.0/carto/basemap/17/38597/81781.jpg', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/tms/1.0.0/carto/basemap/17/38598/81781.jpg', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/tms/1.0.0/carto/basemap/17/38599/81781.jpg', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/tms/1.0.0/carto/basemap/17/38599/81782.jpg', urls) > -1).toBe(true)
})

test('wmts urls', () => {
  expect.assertions(7)

  getUrls({body: request}, mockResponse)

  const urls = mockResponse.json.mock.calls[0][0].wmts
  console.warn(urls);

  expect(urls.length).toBe(6)
  expect($.inArray('https://maps.nyc.gov/wmts/1.0.0/?layer=basemap&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix=EPSG%3A900913%3A17&TileCol=38598&TileRow=49289', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/wmts/1.0.0/?layer=basemap&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix=EPSG%3A900913%3A17&TileCol=38598&TileRow=49290', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/wmts/1.0.0/?layer=basemap&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix=EPSG%3A900913%3A17&TileCol=38599&TileRow=49289', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/wmts/1.0.0/?layer=basemap&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix=EPSG%3A900913%3A17&TileCol=38599&TileRow=49290', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/wmts/1.0.0/?layer=basemap&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix=EPSG%3A900913%3A17&TileCol=38597&TileRow=49289', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/wmts/1.0.0/?layer=basemap&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix=EPSG%3A900913%3A17&TileCol=38597&TileRow=49290', urls) > -1).toBe(true)
})

test('xyz urls', () => {
  expect.assertions(7)

  getUrls({body: request}, mockResponse)

  const urls = mockResponse.json.mock.calls[0][0].xyz
  console.warn(urls);

  expect(urls.length).toBe(6)
  expect($.inArray('https://maps.nyc.gov/xyz/1.0.0/carto/basemap/17/38599/49289.jpg', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/xyz/1.0.0/carto/basemap/17/38599/49290.jpg', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/xyz/1.0.0/carto/basemap/17/38598/49289.jpg', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/xyz/1.0.0/carto/basemap/17/38598/49290.jpg', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/xyz/1.0.0/carto/basemap/17/38597/49289.jpg', urls) > -1).toBe(true)
  expect($.inArray('https://maps.nyc.gov/xyz/1.0.0/carto/basemap/17/38597/49290.jpg', urls) > -1).toBe(true)
})

编辑时：

如下所示修改模块导出的功能会导致通过测试，但是我不明白为什么。现在，它位于github存储库的dev分支上，并且进行了更改，以不反转WMTS的y值。

module.exports = (request, response) => {
  const urls = {tms: [], wmts: [], xyz: []}
  const params = request.body
  const templates = params.templates
  for (let z = params.minz; z <= params.maxz; z++) {
    grid.forEachTileCoord(params.extent, z, tileCoord => {
      const coord = [tileCoord[0], tileCoord[1], - tileCoord[2] - 1] // CHANGED
      invert(coord, templates.tms, urls.tms)
      xyz(coord, templates.wmts, urls.wmts)
      xyz(coord, templates.xyz, urls.xyz)
    })
  }
  response.json(urls)
}