javascript - HERE map JS API v3 : customize cluster marker's color

Question

我知道我可以轻松地覆盖 2.5.x 版本中的 nokia.maps.clustering.MarkerTheme.getColor 来仅自定义集群的颜色标记，但在 3.0.x 版本中似乎没有简单的方法可以做到这一点。

我的意思是，我可以实现这个 H.clustering.ITheme 接口(interface)，但感觉侵入颜色属性确实很痛苦。这是我到目前为止的代码(仅显示相关代码):

var defaultTheme    = clusteredDataProvider.getTheme(),
    customTheme     = {

        /**
         *
         * @implements {H.clustering.ITheme.getClusterPresentation}
         */
        getClusterPresentation: function (cluster) {
            var clusterMarker = defaultTheme.getClusterPresentation
                .call(defaultTheme, cluster);

            /*
             * TODO: Change the color property of the cluster marker.
             * Hmm. How am I supposed to best do it?
             */

            return clusterMarker;
        },

        /**
         *
         * @implements {H.clustering.ITheme.getNoisePresentation}
         */
        getNoisePresentation: function (noisePoint) {
            var noiseMarker = defaultTheme.getNoisePresentation
                .call(defaultTheme, noisePoint);

            return noiseMarker;
        }
    };

HERE map 是否有我可以使用的聚类标记的基本 SVG 模板？

Answer 1

从mapsjs-clustering.js的压缩代码中可以看出，默认主题中的逻辑比仅仅为每个集群创建新标记要多一些。似乎发生的情况是，API 使用 Canvas 元素动态为每个可能的图标渲染图像，然后根据集群的权重为每个标记重复使用(get/putImageData 调用)该图像。以下是我能够弄清楚他们在哪里创建图标的一些事情:

weight < 10     : size 28, color "118, 209, 0", textPosition { x: 11, y: 18 }
weight < 25     : size 38, color "255, 105, 0", textPosition { x: 13, y: 23 }
weight < 50     : size 38, color "240, 60, 0", textPosition { x: 13, y: 23 }
weight < 100    : size 38, color "181, 0, 21", textPosition { x: 13, y: 23 }
weight < 1000   : size 48, color "181, 0, 21", textPosition { x: 15, y: 28 }
weight > 1000   : size 66, color "181, 0, 21", textPosition { x: 20, y: 38 }

因此，要更改颜色属性，您几乎需要对图标绘制代码进行完全逆向工程并重写它。不确定这是一个值得的方法...