如何將樣式設置為 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