Different color to noise marker using here maps

2019-09-06 04:41发布

问题:

Is it possible to apply different color to different noise markers while clustering using here maps api?

There's a theming option available, but that applies to all markers. I would like to set a specific color to specific point based on certain conditions.

回答1:

This is certainly possible using a custom theme. The definition of the H.clustering.DataPoint object includes a data() method which can hold arbitrary data.

When you prepare your dataset you can add it as shown:

var dataPoints = [];

dataPoints.push(new H.clustering.DataPoint(lat, lng, null, {color :'red'}));
dataPoints.push(new H.clustering.DataPoint(lat, lng, null, {color :'green'}));
dataPoints.push(new H.clustering.DataPoint(lat, lng, null, {color :'blue'}));
// etc ...

If you use a custom theme, you can read the data from the noise point and display it as you see fit:

function colorfulClusteringTheme() {
    var baseTheme = new H.clustering.DefaultTheme();
    this.getClusterPresentation = function (cluster) {

      var clusterIcon = baseTheme.getClusterPresentation(cluster).getIcon();
          return new H.map.Marker(cluster.getPosition(), {
              icon: clusterIcon,
          min: cluster.getMinZoom(),
          max: cluster.getMaxZoom()
        });

    };
    this.getNoisePresentation = function (noisePoint) {
       if (noisePoint.data.color === 'red'){
          // add red noise point
          return new H.map.Marker(noisePoint.getPosition(), { icon: redIcon });
       }
       if (noisePoint.data.color === 'green'){
          // add red marker
          return new H.map.Marker(noisePoint.getPosition(), { icon: greenIcon });
       }
        if (noisePoint.data.color === 'blue'){
          // add blue noise point
          return new H.map.Marker(noisePoint.getPosition(), { icon: blueIcon });
       }
    };
  };

You can add the theme to the map in the usual manner:

var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
    clusteringOptions: {
      eps: 16,
      minWeight: 5
    },
    theme: new colorfulClusteringTheme()
  });

  var clusteringLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
  map.addLayer(clusteringLayer);