здесь карты API JS кластеризация: нужны относительные значения вместо количества кластеризованного веса - PullRequest
Новая
       44

здесь карты API JS кластеризация: нужны относительные значения вместо количества кластеризованного веса

0 голосов
/ 24 февраля 2020

с использованием: API Карт для Javascript

Я ищу решение для отображения относительного значения кластеризованных точек (т. Е. 50%).

Дело в том, чтобы отображать местоположения GPS с номерами событий в виде веса. Таким образом, он показывает точки с номером в круге. Тем не менее, я хотел бы показать относительное число. 100% - это сумма всех событий на глобальной карте, которую легко рассчитать. Это также включает значения ниже 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));

1 Ответ

2 голосов
/ 25 февраля 2020

Вам нужно создать собственную тему кластеризации: 

// ....

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 & Пример ЗДЕСЬ

...