文章目录

  最近在做一个手绘地图电子导览的项目,设计师画好图之后需要放到地图上,这方面的资料比较少,之前也没有经验,只看到很多案例都是用高德完成的,自己没有相关经验,之前只玩过百度地图,网上搜索相关资料之后发现一个百度地图瓦片切片工具,用起来非常方便,并且是开源的C#小工具。

  点击前往切片工具BaiduMapTileCutter的Github

  用切片生成的代码在电脑上预览没问题,但我这个项目是用在手机端,为了适应手机在网页的meta信息中要设置viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

  设置完之后问题就出现了,Chrome模拟手机查看没问题,iPhone XR真机查看这个瓦片图就很模糊,查了下原因大概就是手机的视网膜屏,4个物理像素来显示图片上的1个像素,下面是网上对于这个问题的具体描述。

图片模糊问题

  一个位图像素是栅格图像(如:png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如:显示位置,颜色值,透明度等)。理论上,1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示。对于dpr=2的Retina屏幕而言,1个位图像素对应于4个物理像素,由于单个位图像素不可以再进一步分割,所以只能就近取色,导致图片看起来比较模糊,如下图。


  对于图片模糊问题,比较好的方案就是用多倍图片(@2x)。如:一个200×300(CSS pixel)的img标签,对于dpr=2的屏幕,用400×600的图片,如此一来,位图像素点个数就是原来的4倍,在Retina屏幕下,位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例,图片自然就清晰了。
  如果普通屏幕下,也用了两倍图片,会怎样呢?
  在普通屏幕下,200×300(CSS pixel)img标签,所对应的物理像素个数就是200×300个,而两倍图片的位图像素个数是200×300×4个,所以就出现一个物理像素点对应4个位图像素点,但它的取色也只能通过一定的算法取某一个位图像素点上的色值,这个过程叫做(downsampling),肉眼看上去虽然图片不会模糊,但是会觉得图片缺少一些锐利度,或者是有点色差,如下图。

  所以最好的解决办法是:不同的dpr下,加载不同的尺寸的图片。不管是通过CSS媒体查询,还是通过JS条件判断都是可以的。

  既然问题知道了,那就想解决办法,用一张分辨率更高的瓦片图片来填充就可以了,我看了下瓦片切片工具切出来的图片都是256x256的,如果用512x512的应该就可以了,看了项目源码之后,把TileCutter.cs里的256换成512,编译试了一下。没想到瞎猫碰到死耗子,用512x512完美解决了这个问题。

总结一下

  这次也是运气好,理论上来说切片大小的宽高转换应该是有严格的要求的,之前看百度地图瓦片的介绍都是256x256,手机是128x128,这次纯属是瞎尝试弄对了,我把改好的切片工具链接发上来,用这个能裁出512x512的瓦片。
  还有这样的瓦片工具只能以0,0为中心坐标,作为独立图层才能正常显示,不然会因为瓦片名称错误而无法贴在指定的坐标上;想要完美就要仔细去学习下这个切片工具的切割命名逻辑了。。目前不影响使用就先这么弄着了。
512x512百度地图瓦片切片工具
提取码:0ivq


人活着一定要争口气,哪怕生为草绳,也要做绑螃蟹的那根。