Openlayer 3 - кластеризация разных слоев

Я новичок в Openlayer3, так что извините, если я пишу что-то неправильно. Я работаю со стратегией кластеризации. У меня есть несколько типов объектов для отображения на карте, и каждый тип должен быть кластеризован. Для примера я должен показать легковые и грузовые автомобили.

ПЕРВЫЙ ВОПРОС: Чтобы показать два разных типа объектов, является ли мультиисточник единственным способом или я могу использовать один источник, а затем классифицировать объекты?

Для моей первой попытки я использую мульти исходный код, как показано ниже:

var clusterSourceTrucks = new ol.source.Cluster({
    distance: parseInt(20, 10),
    source: new ol.source.Vector({features: [pp1, pp2, pp3]})
  });

var clusterSourceCar = new ol.source.Cluster({
    distance: parseInt(20, 10),
    source: new ol.source.Vector({features: [ll1, ll2, ll3]})
  });

Затем я создаю фабричный метод, используя базовый код на странице примеров OpenLayer:

var styleCache = {};
  function factoryClusteringLayers(name,source,clusterData)
  {
    var clustersLayer = new ol.layer.Vector({
      source: source,
      style: function(feature) {
        var size = feature.get('features').length;
        var style = undefined;
        if (styleCache[name] !== undefined)
            style = styleCache[name][size];
        if (!style) {
          style = new ol.style.Style({
            image: new ol.style.Icon({
              anchorOrigin: 'top-left',
              anchor: [0.5, 0.5],
              anchorXUnits: 'pixels',
              anchorYUnits: 'pixels',
              opacity: 0.75,
              src: 'images/'+clusterData.image,
              scale : clusterData.scale,
            }),
            text: new ol.style.Text({
              font: '16px serif',
              text: size.toString(),
              offsetX: 10,
              offsetY: 12,
              fill: new ol.style.Fill({
                color: clusterData.color
              })
            })
          });
          styleCache[name] = style;
        }
        return style;
      }
    });
    return clustersLayer;
  }

var truckLayer  = factoryClusteringLayers('trucks',clusterSourceTrucks,{image : 'truck.png',scale:0.3, color: '#FFFFFF'});
  var carLayer    = factoryClusteringLayers('cars',clusterSourceCar,{image : 'car.png',scale:0.03,'color':'#000000'});

  var objectLayers = [truckLayer, carLayer];

Этот код работает отлично, и отдельные типы объектов сливаются правильно.

К сожалению, когда я уменьшаю масштаб, две (объединенные) иконки перекрывают друг друга. Я хочу также объединить их, чтобы создать уникальный объект (с новым изображением / иконкой / формой) с суммой итогов двух кластеров, а затем создать всплывающую подсказку с информацией о содержимом.

Предположим, есть 4 машины и 3 грузовика. Zomming вне новых объектов покажет 7 имеет номер. Я нажимаю на точку, и всплывающая подсказка покажет: 4: автомобили 3: грузовик

Это возможно?

Источник

1 ответ

Вы можете взглянуть на этот пример, чтобы отобразить различные функции в кластере: http://viglino.github.io/ol-ext/examples/map/map.clustering.html

При выборе кластера он распадается на части, чтобы отобразить находящиеся в нем функции.

Источник
Другие вопросы по тегам