小场景二维地图适配案例

背景

开发一个定制了专门为APP提供地图服务的组件，提供一个可以被APP嵌入的WEB页面用于展示地图，页面采用 OpenLayers 框架读取存放在服务器中的瓦片地图切图，对接pemc园区事件中心的告警事件进行上图。对接nms接口提供视频预览回放业务。

适配问题

制作成地图切图时，高层级的切图分辨率很高，在PC端测试时，地图拉近建筑可以看清建筑的细节结果（下图左侧）。但是当地图放在APP端进行测试时，则明显发现手机端显示的地图精度达不到预期（下图右侧效果）。

经过查阅相关资料发现，当前的主流手机屏幕虽然屏幕物理尺寸虽然不如电脑屏幕，但是却可以通过数倍提高屏幕的像素密度（PPI）来达到高分辨率的的效果，像素密度PPI由设备像素决定，PPI = 屏幕斜边像素/屏幕尺寸，屏幕斜边像素等于屏幕分辨率的平方相加再开根；PPI越大代表设备像素点越多， 图像越清晰；PPI如果翻一番，设备像素点数量增加四倍，那么每一个点占的空间就被压缩，缩小成原来的1/4。当前市面上的主流设备一般为2~4倍的像素密度，这一值可以通过window.devicePixelRatio 查询到。在移动端渲染web页面的图片时，它自动采取相应的模式进行适配，将缩小后的字体和图标重新放大，这样移动端会用了更多的像素数来显示同样的内容，所以显示尺寸仍然不变，因此显示质量就会相应的降低。

解决办法

此前缺乏类似的案例经验，因此我们参考了百度地图移动端使用的方案，也就是将单个瓦片的切片尺寸扩大一倍，但是仍然使用原尺寸的大小渲染，以达到提高一倍像素密度的目的。

使用 ArcMap 软件对三方厂商的渲染图进行切图加工：将要求三方输出的三个不同分辨率级别的渲染图导入到软件中，通过软件的图层对应工具将三个大小的底图完全重合，并分配到从低到高不同的瓦片层级上：

在最终导出切图时，通过修改缓存配置文件的方式，将输出的瓦片格式改为512x512尺寸，分辨率设置为96。

这样我们就可以获得一份瓦片尺寸比默认配置256px大一倍的瓦片切图。

同时，OpenLayers创建TMS瓦片图层时通过配置参数 tilePixelRatio 设置2倍的像素密度：

关于这里的配置可以参考OpenLayers的官方案例说明 :