0

使用 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 上的更新时添加一个事件侦听器，但这似乎并没有产生已更新的标记，或者如果确实如此，它们被埋在该对象的某个地方，我看不到任何文档可以告诉我在哪里。

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

4

1 回答 1

1

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

通过设置 styleCallback 函数返回图标，我们可以自定义标记并使用来自图层的数据

IE

// 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;
      }
    }
于 2020-06-13T07:51:47.600 回答