如何将样式设置为 tileLayer？

Question

使用 Here Maps Javascript 3.1，我们有一个使用 createDefaultLayers 的有效 map 实现。

const platform = new window.H.service.Platform({
  apikey: APIKEY_HERE
});

const defaultLayers = platform.createDefaultLayers({});

const baseLayer = defaultLayers.vector.normal.day;
  
const container = document.getElementById("here-map");
const map = new window.H.Map(container, baseLayer, {
  center: this.center,
  zoom: this.zoom,
  autoColor: false,
  pixelRatio: 1
});

我们需要添加自定义 styles 以使 map 以我们想要的方式显示（颜色，一些缩放级别更改等）

var provider = map.getBaseLayer().getProvider();
var style = new window.H.map.Style('/custom.yaml',
  'https://js.api.here.com/v3/3.1/styles/omv/');
provider.setStyle(style);

这工作正常，但我们希望使用 normal.day.mobile 作为 baseLayer 来获得更大的文本大小开箱即用。

可以这样添加：

var mapTileService = platform.getMapTileService({
      type: 'base'
    });
    var parameters = {
        ppi: '250'};
    var tileLayer = mapTileService.createTileLayer(
        'maptile',
        'normal.day.mobile',
        256,
        'png8',
        parameters
      );

但是，如果我们现在定义

map.setBaseLayer(tileLayer);

代码失败，因为 setStyle 不是 function。 如何使用自定义 styles 实现 normal.day.mobile 作为 baseLayer？

如果我们这样做，代码不会失败，我们可以看到移动 map 但自定义 styles 在不同的层上，用户看不到。

map.setBaseLayer(baseLayer);
map.addLayer(tileLayer);

有什么方法可以将“normal.day.mobile”作为 map 并在顶部添加自定义 styles？

Answer 1

问题是，您混合了栅格和矢量图层。 错误已经在第二个代码片段中，您可以在其中获取栅格基础层的提供者。 此提供程序是H.map.provider.ImageTileProvider的实例，它没有setStyle方法。

为了从 baseLayer 获取 OMV 提供程序，您应该将 baseLayer 设置为： const baseLayer = defaultLayers.vector.normal.map;

关于更大的标签： ppi参数仅适用于栅格图层，因此我建议您在自定义样式中更新文本大小custom.yaml