在移动设备上使用 Here Maps API 模糊地图图像

Question

我们运行遇到了一个问题，即 Here Map 磁贴在测试设备 (iphone) 上显示模糊，但在桌面模拟器上看起来很清晰。

在桌面上清晰/在 phone 上模糊（不是一个完美的例子，因为上传时图像质量很糟糕，但它在桌面上非常清晰，在我的浏览器 iphone 上模糊。但是，HERE 使用条款消息和黑色图标在两者上都清晰可见。只是地图块模糊不清):

有什么我需要确保存在于 CSS 或 JS 中以确保地图图块的分辨率不会像这样结束吗？也许它与 iphone 的 DPI 有关？

我们拥有的 fiddle 样本：https://jsfiddle.net/bhe5jgdq/

但需要注意的一件事是，即使在我们只有地图而没有 pin 或 flex 等的 DEAD 简单版本上，它仍然会发生。我觉得这可能与图像有关被请求的图块未指定默认为 72 ppi 而不是使用更高分辨率，但我不确定如何传递它。

我们可以尝试攻击任何区域来找出地图在我们的移动设备上最终变得模糊的原因吗？我认为它可能与我们移动设备上更高的 DPI 有关，因为它在我的视网膜显示器上也显示模糊。但我只是不确定如何解决它？

注意，我在一些文档中看到要添加：

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

对于移动设备支持，这似乎没有什么不同，因为它的初始值已经由我们在其上构建页面的网站设置，如下所示：

<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, initial-scale=1, user-scalable=no, shrink-to-fit=no">

我们正在使用：

<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>

Answer 1

您可以尝试在创建默认层时指定PPI（第二个选项）。

var defaultLayers = platform.createDefaultLayers(512, 320);

var map = new H.Map(
document.getElementById('map'),
defaultLayers.normal.map,
{ pixelRatio: 2 }

);

Pixels per inch. Resolution that can be requested, valid values are: 72 – normal, used by default if no value provided 250 – mobile 320 – hi-res

有关更多信息，请阅读文档 https://developer.here.com/documentation/maps/topics_api/h-service-platform.html

Answer 2

这里有一些根据设备像素比调整图块大小的方法（不幸的是，框架本身不会这样做）

// Step 2: initialize layer
var defaultLayers = platform.createDefaultLayers({
  tileSize: devicePixelRatio > 1 ? 512 : 256,
  ppi: devicePixelRatio > 1 ? 320 : 72
});

// Step 3: initialize the map
var map = new H.Map(
  document.getElementById('map'),
  defaultLayers.normal.map,
  {
    center: { lat: 47.056, lng: 2.350 },
    zoom: 6,
    pixelRatio: Math.min(devicePixelRatio, 2)  // capping at 2 since some devices have a pixel ratio above 2 
  }
);

在移动设备上使用 Here Maps API 模糊地图图像

Blurry Map images using Here Maps API on mobile

here-api