在openlayer中对瓦片地图进行平移

失踪人口回归。
这次给大家介绍的是在openlayer中对在线瓦片地图进行平移。可以解决将高德/百度瓦片地图的偏移问题。
适用的场景：当某个在线瓦片地图的坐标系与我们需要的底图坐标系不同，我们很难对每一幅瓦片都使用特定的算法进行坐标修正再进行显示。比较方便的一种方法是对地图的所有瓦片进行平移，（然后在心里认为坐标已经纠正了）。
由于地球是个球体，地理学家为了方便的将球体上的地物在平面中展示，提出了各种投影坐标系，也就是由xy组成的平面坐标系，对我们中国的用户来说，看的比较多的就是类似于[12605635.286907528,3301707.372582343]的形式。而很多时候，尽管我们认为我们被告知现在使用的是地理坐标系，（比如说天地图使用的是CGCS2000坐标系，这是一种地理坐标系，也就是我们看的很多的经纬度，类似于[113.65465，25.64351]），但是为了能在平面中进行展示，也对地理坐标系进行了一定的转换（也就是投影）后显示，如下图。

将曲面转换为平面，不可避免的会产生形变，例如在这张图中南极洲的面积似乎就大于非洲，而不同的坐标系产生的形变往往也是不同的。所幸，当研究区域很小时，我们可以忽略由于投影或者其他参数的影响，认为两种坐标系下的结果都几乎没有形变。
那么不同坐标系的转换问题就可以简化到只需要平移操作（当然，这并不标准，但往往够用）。
那么在疏通了上述逻辑后，下面就开始介绍怎么在openlayer中对瓦片地图进行平移。关于瓦片地图的原理，怪叔叔做了十分精彩的讲解。
这篇文章介绍的瓦片形式包括两种，分别是XYZ和TileArcGISRest，两种类型的平移方式也有一定区别。下面以两种实际需求来介绍

第一个需求是在天地图上叠加高德地图的路网实况图

高德的路网实况图是XYZ的形式：

    let projection1 = get("EPSG:3857");let projectionExtent = projection1.getExtent()let startResolution = getWidth(projectionExtent) / 256;let resolutions = new Array(22);for (let i = 0, ii = resolutions.length; i < ii; ++i) {resolutions[i] = startResolution / Math.pow(2, i);}let TopLeft=getTopLeft(projectionExtent)//var pianyi=[-655.17+80,410.55-40]let offset=[-655.17,410.55]// 针对高德转天地图的偏移量。并不是都是这个值let  tilegrid_roads  = new TileGrid({origin:[TopLeft[0]+offset[0],TopLeft[1]+offset[1]],          // 更改起点resolutions: resolutions,                                // 设置分辨率})let nowDate = new Date();let year = nowDate.getFullYear();let month = nowDate.getMonth() + 1;let today = nowDate.getDate();let hours = nowDate.getHours();let minutes = nowDate.getMinutes();let seconds = nowDate.getSeconds();if (month >= 1 && month<= 9) {month = "0" + month;}if (today >= 1 && today <= 9) {today = "0" + today;}let currentdate = year + "-" + month + "-" + today + " " + hours + ":" + minutes + ":" + seconds;let longTime = new Date(currentdate.replace(new RegExp("-", "gm"), "/")).getTime();return new TileLayer({title: '交通实况图',visible: true,source: new XYZ({tilePixelRatio: 1,tileGrid: tilegrid_roads,tileUrlFunction: function(tileCoord){let z = tileCoord[0]let x = tileCoord[1]let y = tileCoord[2]// y=-y-1 在js文件中可能要进行这步转换，在vue中反而不用。return 'http://tm.amap.com/trafficengine/mapabc/traffictile?v=1.0&;t=1&x=' + x + '&y=' + y + '&z=' + z + '&&t=longTime'}}),});

上述代码的关键是tileGrid的设置,TopLeft表示地图起点，我在上面的代码中设置了偏移量，那么瓦片就会整体偏移。

第二个需求是在天地图上叠加一个地方坐标系的地图

这个地图是在arcgis发布的服务，它的后缀可能是MapServer或者ImageServer这种，格式为TileArcGISRest。

      return new TileLayer({title: '影像',visible: true,source: new TileArcGISRest({url:"xxx/MapServer",tileLoadFunction:function(imageTile, src) {let url="http://222.240.228.72:8060"+src.substring(6)imageTile.getImage().src =reset_url(url)}}),function reset_url(url){let a=url.split("BBOX=")[1].split("&BBOXSR")[0]let temp=a.split("%2C")let head=url.split("MapServer")[0]+"MapServer/export?F=image&FORMAT=PNG32&TRANSPARENT=true&SIZE=320%2C320&BBOX="let tail="&BBOXSR=3857&IMAGESR=3857&DPI=113"let result=head+(parseFloat(temp[0])+60)+"%2C"+(parseFloat(temp[1])-40)+"%2C"+(parseFloat(temp[2])+60)+"%2C"+(parseFloat(temp[3])-40)+tail//这里的60，40是我用到的偏移量return result}

尽管TileArcGISRest格式也有tileGrid这个属性，但是按照上小节的方法却并不能生效，这是因为TileArcGISRest返回的url可以看成是一个动态的，当起点发生变化后，url中的BBOX的值也随之改变，那相当于搞了个寂寞。
发现url中的这一特性之后，那我们就只需要更改url中的BBOX值（也就是其范围矩形的值）即可。

最后，设置的偏移量在不同地方往往是不同的，需要自己试出一个相对最佳的值。另外，在文章的开头也提到了，这并不是完美的解决办法，因此不能保证偏移后地址就完全正确了，只是不会那么离谱。

参考文献：
1.瓦片地图原理
https://blog.csdn.net/qq_35732147/article/details/95061747?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162279053416780261959727%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=162279053416780261959727&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_blogfirst_rank_v2~rank_v29-3-95061747.nonecase&utm_term=%E7%93%A6%E7%89%87&spm=1018.2226.3001.4450