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

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

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的目标就是这样。

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的目标就是这样。

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 });