HERE Maps JS API v3:自定义群集标记的颜色 [英] HERE Maps JS API v3: customize cluster marker's color

问题描述

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

I know that I could just easily override nokia.maps.clustering.MarkerTheme.getColor in version 2.5.x to customize only the color of the cluster marker, but it seems there's no easy way to do so in version 3.0.x.

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

I mean, there is this H.clustering.ITheme interface that I could implement, yet it feels like it is a real pain for hacking into the color property. This is what I code so far (only relevant code shown):

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 Maps是否具有我可以利用的集群标记的基本SVG模板?

Does HERE Maps have a base SVG template of the cluster marker that I could make use of?

推荐答案

根据我在mapsjs-clustering.js的压缩代码中的了解，默认主题中的逻辑比创建新标记要多对于每个群集.似乎发生的事情是，API使用画布元素为每个可能的图标实时渲染了图像，然后根据集群的权重继续为每个标记重用(get/putImageData调用).我可以弄清楚它们在哪里创建图标的一些事情:

From what I can make out in the compressed code of the mapsjs-clustering.js, there is a bit more logic in the default theme than just creating new markers for every cluster. What seems to happen is that the API renders an image for each possible icon on the fly using canvas elements and then keeps reusing (get/putImageData calls) that for each marker based on the weight of the cluster. Here's some things I am able to figure out on where they create the icons:

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 }

因此，要更改color属性，您几乎已经完全对图标绘图代码进行了反向工程并重写了它.不确定这是一个值得的方法...

So, to change the color property, you'd pretty much have completely reverse engineer the icon drawing code and rewrite it. Not sure this is a worthwhile approach...

这篇关于HERE Maps JS API v3:自定义群集标记的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！