HERE Maps JS API v3: customize cluster marker's color

為{幸葍}努か 提交于 2020-01-24 01:04:06

问题


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.

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;
        }
    };

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


回答1:


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 }

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...



来源:https://stackoverflow.com/questions/29826080/here-maps-js-api-v3-customize-cluster-markers-color

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!