当前位置:   article > 正文

解决openlayers6加载百度地图出现偏移问题_openlayers百度地图偏移纠正

openlayers百度地图偏移纠正

1、问题

ol6加载百度地图出现的问题

 

2、原因

由于openlayers6加载地图的方式是右下递增,原先是右上递增,所以在原先加载百度地图的基础之上,将tileUrlFunction中的y坐标变为原先的相反数即可。

3、解决方法

  1. var resolutions = [];
  2. for (var i = 0; i < 19; i++) {
  3. resolutions[i] = Math.pow(2, 18 - i);
  4. }
  5. var tilegrid = new TileGrid({
  6. origin: [0, 0],
  7. resolutions: resolutions
  8. });
  9. var baidu_map_source = function (type) {
  10. let url = '';
  11. const bmapsource = new TileImage({
  12. projection: 'EPSG:3857',
  13. tileGrid: tilegrid,
  14. tileUrlFunction: function (tileCoord, pixelRatio, proj) {
  15. if (!tileCoord) {
  16. return "";
  17. }
  18. var z = tileCoord[0];
  19. var x = tileCoord[1];
  20. //var y = tileCoord[2];
  21. var y = -tileCoord[2]; //y坐标变成相反数
  22. if (x < 0) {
  23. x = "M" + (-x);
  24. }
  25. if (y < 0) {
  26. y = "M" + (-y);
  27. }
  28. return "http://online1.map.bdimg.com/onlinelabel/?qt=tile&x=" +x + "&y=" + y + "&z=" + z +"&styles=pl&udt=20151021&scaler=1&p=1"
  29. }
  30. });
  31. return bmapsource ;
  32. }
  33. var baidu_source = new ol.source.TileImage({
  34. projection: projection,
  35. tileGrid: tilegrid,
  36. tileUrlFunction: baidu_map_source
  37. });
  38. var map_baidu = new ol.layer.Tile({
  39. source: baidu_source,
  40. visible: true
  41. });

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/155811
推荐阅读
相关标签
  

闽ICP备14008679号