Question

我只能自定义噪音图标，因此我将仅覆盖getNoisePresentation方法。如果这样做，则会出现错误getClusterPresentation is not a function。

我在Different color to noise marker using here maps中找到了一个线索，我尝试过

var clusterIcon = new window.H.clustering.DefaultTheme().getClusterPresentation(cluster).getIcon();

但失败，并显示错误H.clustering.DefaultTheme is not a constructor

Answer 1

此解决方案对我有用。您可以基于默认主题创建自定义主题。然后修改它。

参考 HERE Maps JS API v3: customize cluster marker's color

var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
    clusteringOptions: {
        eps: 2,
        minWeight: 3
    }
});

//default theme
var defaultTheme = clusteredDataProvider.getTheme();

//custom theme
var customTheme = {
    getClusterPresentation: function (cluster) {
        //Keep the default theme for clusters
        var clusterMarker = defaultTheme.getClusterPresentation.call(defaultTheme, cluster);
        return clusterMarker;
    },
    getNoisePresentation: function (noisePoint) {
        //get the default noise markers
        var noiseMarker = defaultTheme.getNoisePresentation.call(defaultTheme, noisePoint);
        //modify them here..
        //and return the custom marker (H.map.Marker)
        return noiseMarker;
    }
}

//set the custom theme
clusteredDataProvider.setTheme(customTheme);

Answer 2

我这样做的方法是在创建H.clustering.Provider之后设置getNoisePresentation方法。不要在集群提供程序构造函数中设置主题属性。

 <figure>
     <img class="img-responsive" src="http://lorempixel.com/400/400/fashion/7">
 </figure>

默认的聚类图标仍然保留，但现在将使用您的自定义杂讯图标。

Answer 3

Update: There’s no member DefaultTheme on the H.clustering as from version 3.0.12.0 it can be found under H.clustering.theme.Circular. Hope this helps.

You can implement H.clustering.ITheme interface like in the example shown here:
https://developer.here.com/api-explorer/maps-js/v3.0/clustering/custom-cluster-theme

var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
    clusteringOptions: {
      // Maximum radius of the neighborhood
      eps: 64,
      // minimum weight of points required to form a cluster
      minWeight: 3
    },
    theme: CUSTOM_THEME
  });
    var CUSTOM_THEME = {
      getClusterPresentation: function(cluster) {
        // Get random DataPoint from our cluster
        var randomDataPoint = getRandomDataPoint(cluster),
          // Get a reference to data object that DataPoint holds
          data = randomDataPoint.getData();

        // Create a marker from a random point in the cluster
        var clusterMarker = new H.map.Marker(cluster.getPosition(), {
          icon: new H.map.Icon(data.thumbnail, {
            size: {w: 50, h: 50},
            anchor: {x: 25, y: 25}
          }),

          // Set min/max zoom with values from the cluster,
          // otherwise clusters will be shown at all zoom levels:
          min: cluster.getMinZoom(),
          max: cluster.getMaxZoom()
        });

        // Link data from the random point from the cluster to the marker,
        // to make it accessible inside onMarkerClick
        clusterMarker.setData(data);

        return clusterMarker;
      },
      getNoisePresentation: function (noisePoint) {
        // Get a reference to data object our noise points
        var data = noisePoint.getData(),
          // Create a marker for the noisePoint
          noiseMarker = new H.map.Marker(noisePoint.getPosition(), {
            // Use min zoom from a noise point
            // to show it correctly at certain zoom levels:
            min: noisePoint.getMinZoom(),
            icon: new H.map.Icon(data.thumbnail, {
              size: {w: 20, h: 20},
              anchor: {x: 10, y: 10}
            })
          });

        // Link a data from the point to the marker
        // to make it accessible inside onMarkerClick
        noiseMarker.setData(data);

        return noiseMarker;
      }

HERE Maps JS API V3-群集：如何获取默认的群集图标

3 个答案: