Openlayer 3 - 聚类不同层

问题描述 投票:0回答:1

我是 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辆卡车。 缩小新对象将显示 7 的数量。我单击该点,将显示一个工具提示: 4:汽车 3:卡车

这可能吗?

openlayers markerclusterer
1个回答
0
投票

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

选择集群时,它会弹开以显示其中的功能。

© www.soinside.com 2019 - 2024. All rights reserved.