文章/答案/技术大牛

发布

社区首页 >问答首页 >百度地图乱七八糟，OL中的瓦片被取代

问百度地图乱七八糟，OL中的瓦片被取代
EN

Stack Overflow用户

提问于 2021-03-14 15:06:13

回答 1查看 91关注 0票数 1

我使用的是varsion@6.1.1，我想添加百度地图到其中。

这是我创建的函数，用于返回Tile的源代码：

new XYZ({
        projection: 'BD-MC',
        tileUrlFunction: baiduTileUrlFunction,
        tileGrid: baiduTileGrid,
        attributions: '&copy; <a href="http://map.baidu.com/">Baidu</a>',
      });

这是baiduTileUrlFunction：

const baiduTileUrlFunction = tileCoord => {
  const urlsLength = 5;
  const z = tileCoord[0];
  let x = tileCoord[1];
  let y = tileCoord[2];

  const hash = (x << z) + y;
  let index = hash % urlsLength;
  index = index < 0 ? index + urlsLength : index;

  if (x < 0) {
    x = `M${-x}`;
  }
  if (y < 0) {
    y = `M${-y}`;
  }
  return 'http://online{}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl'
    .replace('{}', index)
    .replace('{x}', x)
    .replace('{y}', y)
    .replace('{z}', z);
};

而对于TileGrid

const baiduTileGrid = new TileGrid({
  extent: transformExtent([-180, -74, 180, 74], 'EPSG:4326', 'BD-MC'),
  origin: [0, 0],
  minZoom: 3,
  resolutions: [
    262144, 131072, 65536, 32768, 16384,
    8192, 4096, 2048, 1024, 512, 256,
    128,64, 32, 16, 8, 4, 2, 1, 0.5,
  ],
});

但是结果是不可接受的，瓷砖被弄得乱七八糟。那么，你对造成这种情况的原因有什么看法？

javascript

openlayers

openlayers-6

回答 1

Stack Overflow用户

发布于 2021-03-18 02:24:29

这是由于OpenLayers版本6.0.0中的更改造成的。

根据自定义Github函数中的文档，您必须更改y的值，如下所示：

const baiduTileUrlFunction = tileCoord => {
  const urlsLength = 5;
  const z = tileCoord[0];
  let x = tileCoord[1];
  let y = tileCoord[2]; // <<-- the change is here

  const hash = (x << z) + y;
  let index = hash % urlsLength;
  index = index < 0 ? index + urlsLength : index;

  if (x < 0) {
    x = `M${-x}`;
  }
  if (y < 0) {
    y = `M${-y}`;
  }
  return 'http://online{}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl'
    .replace('{}', index)
    .replace('{x}', x)
    .replace('{y}', y)
    .replace('{z}', z);
};

它现在工作正常。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66621953

复制

相似问题

问百度地图乱七八糟，OL中的瓦片被取代
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问百度地图乱七八糟，OL中的瓦片被取代EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问百度地图乱七八糟，OL中的瓦片被取代
EN