栅格地图在 3.1 版本后无法正常工作

Question

我已将 JavaScript 的地图 API 更新为 3.1v。之后栅格地图无法正确显示。经过一些缩放得到不清晰的图片和字体问题。实际：

我试过设置一些不同的像素比和其他地图类型，但没有用。有错误吗？

这是我初始化地图的方式：

var platform = new H.service.Platform({
            'apikey': apiKey,
        });

 $scope.defaultLayers = platform.createDefaultLayers({
            tileSize: pixelRatio === 1 ? 256 : 512,
            ppi: pixelRatio === 1 ? undefined : 320,
            pois: true
        });
        $scope.geocoder = platform.getGeocodingService();

        $scope.map = new H.Map(
            document.getElementById("here-map-canvas"),
            $scope.defaultLayers.raster.normal.map,
            {
                zoom: 12,
                center: { lat: officeLat, lng: officeLng }
            });

        $scope.markerGroup = new H.map.Group();

        $scope.map.addObject($scope.markerGroup);



        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents($scope.map));                                                    //Step 3: make the map interactive

        $scope.ui = H.ui.UI.createDefault($scope.map, $scope.defaultLayers);    ```

**Please check imgs:**

Actual: https://i.stack.imgur.com/Vu17g.jpg
Expected: https://i.stack.imgur.com/Tcid8.jpg



<meta name="viewport" content="width=device-width, initial-scale=1.0">
Refs:
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css?dp-version=1549984893" />
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

Answer 1

请添加以下库并尝试运行，同时分享代码中使用过的库。

<meta name="viewport" content="initial-scale=1.0,
width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"
type="text/javascript" charset="utf-8"></script>

Answer 2

在 zoom & center:

旁边添加 pixelRatio 参数

$scope.map = new H.Map(
    document.getElementById("here-map-canvas"),
    $scope.defaultLayers.raster.normal.map,
    {
        zoom: 12,
        center: { lat: officeLat, lng: officeLng },
        pixelRatio: window.devicePixelRatio || 1
    }
);

并在 Behavior 和 ZoomControl UI 上禁用分数缩放（在 v3.1 中默认启用):

behavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);

$scope.ui.removeControl('zoom');
$scope.ui.addControl('zoom', new H.ui.ZoomControl({
  fractionalZoom: false,
  alignment: H.ui.LayoutAlignment.RIGHT_BOTTOM
}));

有关详细信息，请参阅地图选项的文档：https://developer.here.com/documentation/maps/topics_api/h-map-options.html#h-map-options

缩放控制选项： https://developer.here.com/documentation/maps/topics_api/h-ui-zoomcontrol-options.html

以及要在行为上禁用的功能：https://developer.here.com/documentation/maps/topics_api/h-mapevents-behavior-feature.html

栅格地图在 3.1 版本后无法正常工作

Raster map doesn't work correct after 3.1 version

here-api