Here Maps 图层中的样式标记

Question

使用 Here 开发者网站上提供的示例代码，我正在显示邮政编码边界。

我想要做的是抓住放置在质心处的标记以更改图标，但我在文档中找不到任何指示如何完成此操作的内容。

到目前为止，代码看起来像这样，并且与此处文档中的代码几乎相同 (https://developer.here.com/documentation/maps/3.1.15.1/dev_guide/topics/fleet-telematics-advanced-data-sets.html)：

showPostcodes() {
  const service = this.platform.getPlatformDataService();
  const bubble = new H.ui.InfoBubble(this.map.getCenter(), {
    content: ''
  });
  bubble.close();
  this.ui.addBubble(bubble);

  const style = new H.map.SpatialStyle();

  // create tile provider and layer that displays postcode boundaries
  const boundariesProvider = new H.service.extension.platformData.TileProvider(
    service,
    {
      layerId: 'PSTLCB_GEN',
      level: 12
    },
    {
      resultType:
        H.service.extension.platformData.TileProvider.ResultType.POLYLINE,
      styleCallback: function (data) {
        return style;
      }
    }
  );
  const boundaries = new H.map.layer.TileLayer(boundariesProvider);

  this.map.addLayer(boundaries);

  // create tile provider and layer that displays postcode centroids
  const centroidsProvider = new H.service.extension.platformData.TileProvider(
    service,
    {
      layerId: 'PSTLCB_MP',
      level: 12
    },
    {
      resultType:
        H.service.extension.platformData.TileProvider.ResultType.MARKER,
      styleCallback: function (data) {
        return style;
      }
    }
  );
  const centroids = new H.map.layer.MarkerTileLayer(centroidsProvider);
  this.map.addLayer(centroids);

  centroidsProvider.addEventListener('tap', function (ev) {
    const marker = ev.target;
    console.log(marker);
    bubble.setPosition(marker.getGeometry());
    const str =
      '<nobr>Postal code: ' +
      marker.getData().getCell('POSTAL_CODE') +
      '</nobr><br>' +
      '<br>';
    bubble.setContent(str);
    bubble.open();
  });
},

我试过在 centroidsProvider 的更新上添加一个事件侦听器，但这似乎没有产生更新的标记，或者如果产生了，它们被埋在那个对象的某个地方，我不能查看任何文档告诉我在哪里。

那么，简而言之，如何更改以这种方式创建的标记的默认图标？

Answer 1

感谢 HereMaps Slack 社区，我得到了这个回复，让我可以做我需要做的事情。

通过将 styleCallback 函数设置为 return 图标，我们可以自定义标记并使用图层中的数据

即

// Allows us to customise the icon for each postcode district
const svg = `<svg width="80" height="24" xmlns="http://www.w3.org/2000/svg"><text x="0" y="20" font-size="10pt" font-family="Arial">{POSTCODE}</text></svg>`;

const centroidsProvider = new H.service.extension.platformData.TileProvider(
    service,
    {
      layerId: 'PSTLCB_MP',
      level: 12
    },
    {
      resultType:
        H.service.extension.platformData.TileProvider.ResultType.MARKER,
      styleCallback(data) {
        const postcode = data.getCell('POSTAL_CODE');
        const postcodeSvg = svg.replace('{POSTCODE}', postcode);
        const icon = new H.map.Icon(postcodeSvg);
        return icon;
      }
    }

Here Maps 图层中的样式标记

Styling markers in a Here Maps layer

heremaps