HERE映射:显示聚类和非聚类点

时间:2018-11-14 13:05:40

标签: here-api

我的目标是显示一组群集数据点和一个不同性质的数据点,这些数据点永远不会到达同一层中的群集,因此它们都可以接收悬停鼠标事件。

是否可以告诉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>

1 个答案:

答案 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
  }
});