我的目标是显示一组群集数据点和一个不同性质的数据点,这些数据点永远不会到达同一层中的群集,因此它们都可以接收悬停鼠标事件。
是否可以告诉H.clustering.Provider
总是从集群中排除某些点,或者创建一个可以做到的自定义H.map.provider.ObjectProvider
?
P。 S.
我尝试创建两个图层并在CSS中为它们设置pointer-events: none
来捕获所有点的悬停事件,它虽然有效,但是使地图使用起来太慢了。
更新
这是一个演示代码,目标是为两个标记都获得一个悬停矩形,条件是永远不要将第一个市场包括在集群中
<html>
<head>
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-clustering.js" type="text/javascript" charset="utf-8"></script>
<style>
svg:hover {
border: 2px solid red;
}
</style>
</head>
<body>
<div id="mapContainer"/>
<script>
var platform = new H.service.Platform({
'app_id': 'my id',
'app_code': 'my code'
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.normal.map,
{
zoom: 10,
center: { lat: 51.5, lng: 13.4 }
});
//this marker should not go to clusters
var marker = new H.map.DomMarker({ lat: 51.5, lng: 13.4 });
map.addObject(marker);
//this marker should go to clusters if there is more data points
var dataPoints = [];
dataPoints.push(new H.clustering.DataPoint(51.5, 13.45));
var theme =
{
getClusterPresentation: function(cluster){
return new H.map.DomMarker(cluster.getPosition(), {});
},
getNoisePresentation: function(point){
return new H.map.DomMarker(point.getPosition(), {});
}
}
var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
theme: theme,
});
var layer = new H.map.layer.ObjectLayer(clusteredDataProvider);
map.addLayer(layer);
</script>
</body>
</html>
答案 0 :(得分:0)
以下示例显示了使用参数eps和minWeight初始化的集群提供程序。 eps 保留将数据点考虑在其中进行聚类的半径值,而 minWeight 保留靠近另一个点必须达到或超过以聚类的点的累积权重。在示例中,minWeight的值为3,这意味着三个点的权重分别为一个或两个数据点,权重分别为2和1,它们构成一个簇。这将减少呈现页面的时间。另请参阅新文档:
https://developer.here.com/documentation/examples/maps-js/clustering/marker-clustering
var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
min: 4,
max: 10,
clusteringOptions: {
eps: 32,
minWeight: 3
}
});