javascript - 这里映射 API JS 聚类 : need relative values instead number of clustered weight

Question

使用:Maps API for Javascript

我正在寻找一种解决方案来显示聚类点的相对值(即 50%)。

该案例是显示 GPS 位置，并以事件数量作为权重。所以它显示了圆圈中带有数字的点。不过，我想显示相对数字。 100%是全局 map 上所有事件的总和，很容易计算。这还包括低于 1 的值，即 0.01%。我的第一个简单方法是减少 % 符号，但对于聚类来说，最小值是 1，或者？

非常感谢您的帮助。

var dataPoints = [];
dataPoints.push(new H.clustering.DataPoint(51.01, 2.01, 10.1234567890));
dataPoints.push(new H.clustering.DataPoint(49.31, 2.01, 20));
dataPoints.push(new H.clustering.DataPoint(50.34, 1.81, 0.1));
dataPoints.push(new H.clustering.DataPoint(53.00, 1.71, 4.3));
dataPoints.push(new H.clustering.DataPoint(52.61, 2.01, 5.3));

var clusteredDataProvider = new H.clustering.Provider(dataPoints);

// Create a layer that includes the data provider and its data points: 
var layer = new H.map.layer.ObjectLayer(clusteredDataProvider);

// Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: window.apikey
});

var defaultLayers = platform.createDefaultLayers();

// Step2: initialize a map
var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
  center: new H.geo.Point(50, 1),
  zoom: 6,
  pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

// Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Step 4: create the default UI component, for displaying bubbles
var ui = H.ui.UI.createDefault(map, defaultLayers);

// Add the layer to the map:
map.addLayer(layer);

dataPoints.push(new H.clustering.DataPoint(52.45, 1.01, 0.05));

Answer 1

您需要创建自定义集群主题:

// ....

var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
    theme: customTheme
  });

customTheme = {
  getClusterPresentation: function(cluster) {
    // here you create your cluster Marker with custom Icon
  },
  getNoisePresentation: function (noisePoint) {
    // here you create your noise point Marker with custom Icon
  }
};

// ....

我创建了简单的jsfiddle使用您的数据的示例，该数据将相对值显示为百分比。希望对您有帮助。

有关集群自定义主题的更多信息:API Reference & HERE example