与 olms 一起使用时，OpenLayers t.getScaleArray 不是函数

Posted 2023-05-06

【中文标题】与 olms 一起使用时，OpenLayers t.getScaleArray 不是函数

【英文标题】：OpenLayers t.getScaleArray is not a function when using with olms

【发布时间】：2020-12-10 22:16:02

【问题描述】：

我想在 OpenLayers 中包含一个矢量平铺地图，并使用 GL 样式文件来设置地图的样式。因此，我使用的是 ol mapbox 样式（olms）。我包括了 ol 版本 6.4.3 和 olms 版本 6.1.3。我想在 ID 为“map”的 DOM 对象中渲染我的地图。我从 OpenMapTiles 服务器获取我的图块，我自己托管（在 localhost:32768 上）。 这是我的代码：

const vectorTileLayer = new ol.layer.VectorTile(
  source: new ol.source.VectorTile(
    attributions: [
      '<a href="http://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a>',
      '<a href="http://www.openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap contributors</a>',
    ],
    format: new ol.format.MVT(),
    url: 'http://localhost:32768/data/v3/z/x/y.pbf',
    maxZoom: 18,
  ),
);

this.map = new ol.Map(
  target: 'map',
  loadTilesWhileAnimating: true,
  loadTilesWhileInteracting: true,
  view: new ol.View(this.viewConfig),
);

fetch('http://localhost:32768/styles/osm-bright/style.json').then(function(response) 
  response.json().then(function(glStyle) 
    olms.applyStyle(vectorTileLayer, glStyle, 'openmaptiles').then(function() 
      me.map.addLayer(vectorTileLayer);
    );
  );
);

我尝试了不同来源的不同实现（使用 stylefunction() 函数，使用 apply() 函数）并消除了所有其他可能导致错误的因素。

如果我用地图加载页面，我会得到以下错误：

TextBuilder.js:502 Uncaught TypeError: t.getScaleArray is not a function
at e.setTextStyle (TextBuilder.js:502)
at Point (vector.js:239)
at vector.js:123
at Fo (vector.js:102)
at e.renderFeature (VectorTileLayer.js:565)
at e.x (VectorTileLayer.js:258)
at d (VectorTileLayer.js:271)
at e.updateExecutorGroup_ (VectorTileLayer.js:286)
at e.prepareTile (VectorTileLayer.js:131)
at e.dispatchEvent (Target.js:114)

当不从我的 Tile Server 获取样式（并使用 olms 应用它们），并在创建地图后立即添加图层时，我没有收到错误，但当然我也没有样式。

我还在这个样式文件中包含了所需的字体。

【问题讨论】：

您需要使用 OpenLayers 6.3.1 版，因为 olms 似乎基于 6.1.0 版 github.com/openlayers/ol-mapbox-style/blob/master/…，因此它不支持 6.4.0 版中引入的二维图标和文本比例

@Mike 这似乎是问题所在！感谢您的建议！我仍然遇到一些文本显示问题，一些文本似乎显示双重等等，但我认为这可能是另一个问题。

olms 6.1.4 版现已推出，与 ol 6.4.3 兼容

【参考方案1】：

对于所有遇到相同问题的人，请查看 Mike 对该问题的评论。

您需要使用 OpenLayers 6.3.1 版，因为 olms 似乎基于 6.1.0 版 https://github.com/openlayers/ol-mapbox-style/blob/master/package.json#L36，因此它不支持 6.4.0 版中引入的二维图标和文本比例

这似乎解决了大部分问题。

【讨论】：

更新ol-mapbox-style到v6.1.3应该就够了。这是以前版本的一个问题，因为 ol.style.Text 是内置在旧版本中的，而不是从 OpenLayers 旧版本中使用的。请记住，最好不要使用旧版本，而是使用带有捆绑器的相应 npm 包。