我是 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:卡车
这可能吗?
您可以查看此示例以显示集群中的不同功能:http://viglino.github.io/ol-ext/examples/map/map.clustering.html
选择集群时,它会弹开以显示其中的功能。