Question

我们遇到的问题是，HERE地图上的簇加载太慢。我们只有7000点。在HERE教程中的示例中，对超过10.000个机场点的分类工作很顺利。看起来大多数时间都需要getNoisePresentation方法（请参见下文）。

我们真的很努力，将为您解决问题的技巧和帮助提供帮助。先感谢您。这是一个群集代码：

    const clusterOrigin = new H.clustering.Provider(this[typeFreights].originPoints, {
            clusteringOptions: clusteringOptions,
            theme: {
                getClusterPresentation(cluster) {
                    let counts = 0
                    cluster.forEachDataPoint(point => counts += point.getData().counts)

                    const weight = cluster.getWeight()
                    const size = countScale(weight) * pixelRatio
                    const viewBox = [-size, -size, size * 2, size * 2]

                    const marker = svg
                        .replace(/\{counts\}/g, counts)
                        .replace(/\{viewBox\}/g, viewBox)
                        .replace(/\{size\}/g, size)
                        .replace(/\{fill\}/g, "#1d6eb6")

                    const clusterMarker = new H.map.Marker(cluster.getPosition(), {
                        icon: new H.map.Icon(marker, {
                            size: { w: size, h: size },
                        }),
                        min: cluster.getMinZoom(),
                        max: cluster.getMaxZoom(),
                    })

                    return clusterMarker
                },
                getNoisePresentation(noisePoint) {
                    const data = noisePoint.getData()
                    const weight = noisePoint.getWeight()
                    const size = countScale(weight) * pixelRatio
                    const viewBox = [-size, -size, size * 2, size * 2]

                    const marker = svg
                        .replace(/\{counts\}/g, data.counts)
                        .replace(/\{viewBox\}/g, viewBox)
                        .replace(/\{size\}/g, 30)
                        .replace(/\{fill\}/g, "#1d6eb6")

                    const noiseMarker = new H.map.Marker(noisePoint.getPosition(), {
                        min: noisePoint.getMinZoom(),
                        icon: new H.map.Icon(marker),
                    })

                    return noiseMarker
                },
            },
        })

        const clusterDestination = new H.clustering.Provider(this[typeFreights].destionationPoints, {
            clusteringOptions: clusteringOptions,
            theme: {
                getClusterPresentation(cluster) {
                    let counts = 0
                    cluster.forEachDataPoint(point => counts += point.getData().counts)

                    const weight = cluster.getWeight()
                    const size = countScale(weight) * pixelRatio
                    const viewBox = [-size, -size, size * 2, size * 2]

                    const marker = svg
                        .replace(/\{counts\}/g, counts)
                        .replace(/\{viewBox\}/g, viewBox)
                        .replace(/\{size\}/g, size)
                        .replace(/\{fill\}/g, "#fe910c")

                    const clusterMarker = new H.map.Marker(cluster.getPosition(), {
                        icon: new H.map.Icon(marker, {
                            size: { w: size, h: size },
                        }),
                        min: cluster.getMinZoom(),
                        max: cluster.getMaxZoom(),
                    })

                    return clusterMarker
                },
                getNoisePresentation(noisePoint) {
                    const data = noisePoint.getData()
                    const weight = noisePoint.getWeight()
                    const size = countScale(weight) * pixelRatio
                    const viewBox = [-size, -size, size * 2, size * 2]

                    const marker = svg
                        .replace(/\{counts\}/g, data.counts)
                        .replace(/\{viewBox\}/g, viewBox)
                        .replace(/\{size\}/g, 30)
                        .replace(/\{fill\}/g, "#fe910c")

                    const noiseMarker = new H.map.Marker(noisePoint.getPosition(), {
                        min: noisePoint.getMinZoom(),
                        icon: new H.map.Icon(marker),
                    })

                    return noiseMarker
                },
            },
        })

Answer 1

主要问题是您不缓存图标，因此创建内存和CPU不必要。

在方法“ getClusterPresentation”和“ getNoisePresentation”中，有对H.new.Icon的调用，并且没有对已创建的Icon进行缓存和重用。这意味着在最坏的情况下，即使这些图标看起来相同，也会创建7000个图标-参见

最佳做法->开发人员指南（https://developer.here.com/documentation/maps/topics/best-practices.html）中的图标重用

希望这会有所帮助。

群集太慢，需要7000分钟才能加载2分钟

1 个答案: