mapboxgl加载tiff( 二 ) _生活百科

本以为到这里问题已经解决，但是在查看地图时，发现图片图层数据叠加到底图有不小的偏移。
经过一番对比分析，发现原来是tiff数据的坐标系与地图坐标系不一致的导致的。我拿到的tiff数据坐标系为西安80的投影坐标系，在展示时配置的为wgs84地理坐标系，所以会有偏差。既然是坐标系问题，那就通过工具对tiff文件做下投影转换。这里用的是arcmap，打开ArcToolbox–>Data Management Tools–>Projections and Transformations–>Raster–>Project Raster

文章插图
转换之后会发现，数据的行列值也会发生变化，也就是tiff图片的大小和形状都有所变化。
转换前：

文章插图
转换后：

文章插图
使用转换后的数据再次解析，然后叠加到地图，位置完全匹配。
最终展示方案通过尝试发现，单独的图片展示时，由于图片分辨率固定，当地图等级放大到一定程度图片会被放大很多导致图片模糊不清，展示效果不理想；单独的格网面展示时，当地图等级缩小到一定程度，面图层则会消失，也就是文章开头提到的问题。
综上，根据自己的格网数据大小，判断在哪个等级格网面数据会消失，小于这个等级使用图片展示，大于这个等级用格网面展示，就可以完美的展示出想要的效果。
处理前效果：

文章插图
处理后效果：

文章插图

以上为有tiff栅格数据情况的解决方案，针对于只有格网面数据，而没有tiff栅格数据的情况要怎么解决呢？
如果在这组格网数据中，每个网格的属性中有他所在原始tiff数据的像素位置，以及原始tiff数据像素大小，就可以写一个类似上文中的getBase64Image方法，遍历每个网格，在网格对应的像素位置上绘制颜色，然后再通过canvas导出图片添加到地图。

总结