区块链技术博客
www.b2bchain.cn

openlayer 使用百度瓦片图,解决模糊和偏移求职学习资料

本文介绍了openlayer 使用百度瓦片图,解决模糊和偏移求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

openlayer在使用百度在线瓦片图的时候容易发生图片模糊和位置偏移,其中讨论的最激烈的是https://github.com/openlayers/openlayers/issues/3522
其中提及了maptalks(另外一种地图库)可以很好的解决模糊和偏移,所以本demo的目标就是这样。
openlayer 使用百度瓦片图,解决模糊和偏移

var zoom = 15; var maxZoom = 20; var bd09Extent = [-20037726.37, -12474104.17, 20037726.37, 12474104.17]; var baiduMercator = new ol.proj.Projection({   code: "baidu",   extent: bd09Extent,   units: "m" }); ol.proj.addProjection(baiduMercator); ol.proj.addCoordinateTransforms("EPSG:4326", baiduMercator, projzh.ll2bmerc, projzh.bmerc2ll); ol.proj.addCoordinateTransforms("EPSG:3857", baiduMercator, projzh.smerc2bmerc, projzh.bmerc2smerc);  var bmercResolutions = []; for (var i = 0; i <= 20; ++i) {   bmercResolutions[i] = Math.pow(2, 18 - i); }  var urls = [0, 1, 2, 3].map(function (sub) {   return (     "http://maponline" +     sub +     ".bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20191119"   ); });  var source = new ol.source.XYZ({   projection: "baidu",   maxZoom: maxZoom,   tileUrlFunction: function (tileCoord) {     var x = tileCoord[1];     var y = -tileCoord[2] - 1;     var z = tileCoord[0];     var hash = (x << z) + y;     var index = hash % urls.length;     index = index < 0 ? index + urls.length : index;     if (x < 0) {       x = "M" + -x;     }     if (y < 0) {       y = "M" + -y;     }      return 'http://maponline' + index + '.bdimg.com/tile/?qt='+ (z === 20 ? 'v' : '') +'tile&x=' + x + '&y=' + y + '&z=' + z + '&styles=pl&scaler=1&udt=20201022&from=jsapi3_0';   },   tileGrid: new ol.tilegrid.TileGrid({     resolutions: bmercResolutions,     origin: [0, 0],     maxZoom: maxZoom   }) });  var baidu = new ol.layer.Tile({   source: source });

openlayer在使用百度在线瓦片图的时候容易发生图片模糊和位置偏移,其中讨论的最激烈的是https://github.com/openlayers/openlayers/issues/3522
其中提及了maptalks(另外一种地图库)可以很好的解决模糊和偏移,所以本demo的目标就是这样。
openlayer 使用百度瓦片图,解决模糊和偏移

var zoom = 15; var maxZoom = 20; var bd09Extent = [-20037726.37, -12474104.17, 20037726.37, 12474104.17]; var baiduMercator = new ol.proj.Projection({   code: "baidu",   extent: bd09Extent,   units: "m" }); ol.proj.addProjection(baiduMercator); ol.proj.addCoordinateTransforms("EPSG:4326", baiduMercator, projzh.ll2bmerc, projzh.bmerc2ll); ol.proj.addCoordinateTransforms("EPSG:3857", baiduMercator, projzh.smerc2bmerc, projzh.bmerc2smerc);  var bmercResolutions = []; for (var i = 0; i <= 20; ++i) {   bmercResolutions[i] = Math.pow(2, 18 - i); }  var urls = [0, 1, 2, 3].map(function (sub) {   return (     "http://maponline" +     sub +     ".bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20191119"   ); });  var source = new ol.source.XYZ({   projection: "baidu",   maxZoom: maxZoom,   tileUrlFunction: function (tileCoord) {     var x = tileCoord[1];     var y = -tileCoord[2] - 1;     var z = tileCoord[0];     var hash = (x << z) + y;     var index = hash % urls.length;     index = index < 0 ? index + urls.length : index;     if (x < 0) {       x = "M" + -x;     }     if (y < 0) {       y = "M" + -y;     }      return 'http://maponline' + index + '.bdimg.com/tile/?qt='+ (z === 20 ? 'v' : '') +'tile&x=' + x + '&y=' + y + '&z=' + z + '&styles=pl&scaler=1&udt=20201022&from=jsapi3_0';   },   tileGrid: new ol.tilegrid.TileGrid({     resolutions: bmercResolutions,     origin: [0, 0],     maxZoom: maxZoom   }) });  var baidu = new ol.layer.Tile({   source: source });

openlayer在使用百度在线瓦片图的时候容易发生图片模糊和位置偏移,其中讨论的最激烈的是https://github.com/openlayers/openlayers/issues/3522
其中提及了maptalks(另外一种地图库)可以很好的解决模糊和偏移,所以本demo的目标就是这样。
openlayer 使用百度瓦片图,解决模糊和偏移

var zoom = 15; var maxZoom = 20; var bd09Extent = [-20037726.37, -12474104.17, 20037726.37, 12474104.17]; var baiduMercator = new ol.proj.Projection({   code: "baidu",   extent: bd09Extent,   units: "m" }); ol.proj.addProjection(baiduMercator); ol.proj.addCoordinateTransforms("EPSG:4326", baiduMercator, projzh.ll2bmerc, projzh.bmerc2ll); ol.proj.addCoordinateTransforms("EPSG:3857", baiduMercator, projzh.smerc2bmerc, projzh.bmerc2smerc);  var bmercResolutions = []; for (var i = 0; i <= 20; ++i) {   bmercResolutions[i] = Math.pow(2, 18 - i); }  var urls = [0, 1, 2, 3].map(function (sub) {   return (     "http://maponline" +     sub +     ".bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20191119"   ); });  var source = new ol.source.XYZ({   projection: "baidu",   maxZoom: maxZoom,   tileUrlFunction: function (tileCoord) {     var x = tileCoord[1];     var y = -tileCoord[2] - 1;     var z = tileCoord[0];     var hash = (x << z) + y;     var index = hash % urls.length;     index = index < 0 ? index + urls.length : index;     if (x < 0) {       x = "M" + -x;     }     if (y < 0) {       y = "M" + -y;     }      return 'http://maponline' + index + '.bdimg.com/tile/?qt='+ (z === 20 ? 'v' : '') +'tile&x=' + x + '&y=' + y + '&z=' + z + '&styles=pl&scaler=1&udt=20201022&from=jsapi3_0';   },   tileGrid: new ol.tilegrid.TileGrid({     resolutions: bmercResolutions,     origin: [0, 0],     maxZoom: maxZoom   }) });  var baidu = new ol.layer.Tile({   source: source });

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » openlayer 使用百度瓦片图,解决模糊和偏移求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们