遇到个需求是点聚合需要使用图片，官方文档没找到解决办法，所以自己修改了下mapv.js文件
如下：
1、修改mapv.js后点聚合 options 中聚合点相关配置及释义
var options = {minSize: 32, // 如果是图标则为聚合图标最小宽、高，非图标则为最小半径maxSize: 48, // 同 minSizeglobalAlpha: 0.8, // 透明度clusterRadius: 150, // 聚合像素半径maxClusterZoom: 18, // 最大聚合的级别maxZoom: 19, // 最大显示级别minPoints: 5, // 最少聚合点数，点数多于此值才会被聚合extent: 400, // 聚合的细腻程度，越高聚合后点越密集label: {// 聚合文本样式show: true, // 是否显示聚合点fillStyle: '#0A1731',iconOptions: {show: true, // 是否显示图像url: 'Sean.png', // 图像urloffset: {x: 0,y: 0},shadowColor: 'rgba(20, 34, 54, 1)', // 图像阴影配置shadowBlur: 10,},},}
2、mapv.js 修改的地方
if (item.properties && item.properties.cluster) {//if判断为新增, 即如果显示聚合点且聚合点的iconOptions.show === true,则显示图像if (options.label && options.label.iconOptions && options.show !== false && options.label.iconOptions.show) {this.drawSeanIcon(item, options.label, context);} else {//这里为原有代码，绘制的一个圆context.arc(coordinates[0], coordinates[1], item.size, 0, Math.PI * 2);context.fillStyle = item.fillStyle;context.fill();if (options.label && options.label.show !== false) {context.fillStyle = options.label.fillStyle || 'white';if (options.label.font) {context.font = options.label.font;}if (options.label.shadowColor) {context.shadowColor = options.label.shadowColor;}if (options.label.shadowBlur) {context.shadowBlur = options.label.shadowBlur;}var text = item.properties.point_count;var textWidth = context.measureText(text).width;context.fillText(text, coordinates[0] + 0.5 - textWidth / 2, coordinates[1] + 0.5 + 3);}}}
3、drawSean() 是复制的 drawIcon()，稍微改动了下，增加了数字的显示，不解释了，
drawSeanIcon: function drawSeanIcon(item, options, context) {var _ref = item.geometry._coordinates || item.geometry.coordinates,_ref2 = slicedToArray(_ref, 2),x = _ref2[0],y = _ref2[1];var iconOptions = Object.assign({}, options.iconOptions, item.iconOptions);var drawPoint = function drawPoint() {context.arc(x, y, options.size || 5, 0, Math.PI * 2);context.fillStyle = options.fillStyle || 'red';context.fill();};if (!iconOptions.url) {drawPoint();return;}// 设置图像widthvar iconWidth = item.size;var iconHeight = item.size;var iconOffset = iconOptions.offset || {x: 0, y: 0 };x = x - ~~iconWidth / 2 + iconOffset.x;y = y - ~~iconHeight / 2 + iconOffset.y;var url = window.encodeURIComponent(iconOptions.url);var img = imageMap[url];if (img) {if (img === 'error') {drawPoint();} else if (iconWidth && iconHeight) {//如果点设置了阴影，这里要给图片也加上阴影，不然图片遮不住点的阴影context.shadowBlur = iconOptions.shadowBlur;context.shadowColor = iconOptions.shadowColor;context.drawImage(img, x, y, iconWidth, iconHeight);} else {context.shadowBlur = iconOptions.shadowBlur;context.shadowColor = iconOptions.shadowColor;context.drawImage(img, x, y);}if (options.iconOptions.show) {//绘制完图像以后，增加文字显示context.fillStyle = options.fillStyle;context.textBaseline = 'middle';context.textAlign = 'center';var coordinates = item.geometry._coordinates || item.geometry.coordinates;var text = item.properties.point_count;var textWidth = context.measureText(text).width;// 这里filltext的参数我按自己项目的需求改了下，原版参见drawIconcontext.fillText(text, coordinates[0] - textWidth / 6 + 0.5 , coordinates[1] + 0.5 + 1);}} else {// 缓存，操作同上if (!stacks[url]) {stacks[url] = [];getImage(url, function (img, src) {stacks[src] && stacks[src].forEach(function (fun) {return fun(img);});stacks[src] = null;imageMap[src] = img;}, function (src) {stacks[src] && stacks[src].forEach(function (fun) {return fun('error', src);});stacks[src] = null;imageMap[src] = 'error';drawPoint();});}stacks[url].push(function (x, y, iconWidth, iconHeight) {return function (img) {if (img === 'error') {drawPoint();} else if (iconWidth && iconHeight) {context.shadowBlur = iconOptions.shadowBlur;context.shadowColor = iconOptions.shadowColor;context.drawImage(img, x, y, iconWidth, iconHeight);} else {context.shadowBlur = iconOptions.shadowBlur;context.shadowColor = iconOptions.shadowColor;context.drawImage(img, x, y);}if (options.iconOptions.show) {context.fillStyle = options.fillStyle;context.textBaseline = 'middle'context.textAlign = 'center';var coordinates = item.geometry._coordinates || item.geometry.coordinates;var text = item.properties.point_count;var textWidth = context.measureText(text).width;context.fillText(text, coordinates[0] - textWidth / 6 + 0.5 , coordinates[1] + 0.5 + 1);}};}(x, y, iconWidth, iconHeight));}},
3、修改后的效果，可以展示图像
