Question

我是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];

此代码完美无缺，单个类型的对象合并正确。

不幸的是，当我缩小时，两个（altredy合并的）图标重叠在一起。我想合并它们以创建一个唯一的对象（带有新图像/图标/形状），其中包含两个集群的总和，然后创建一个包含内容信息的工具提示。

假设有4辆车和3辆卡车。 Zomming出新的对象将显示7有数字。我点击该点，工具提示将显示： 4：汽车 3：卡车

这可能吗？

Answer 1

您可以查看此示例以显示群集中的不同功能：http://viglino.github.io/ol-ext/examples/map/map.clustering.html

选择群集时，它会分开以显示其中的要素。

Openlayer 3 - 聚类不同的层

1 个答案: