遇到个需求是点聚合需要使用图片,官方文档没找到解决办法,所以自己修改了下mapv.js文件
如下:
1、修改mapv.js后点聚合 options 中聚合点相关配置及释义
var options = {
minSize: 32, // 如果是图标则为聚合图标最小宽、高,非图标则为最小半径
maxSize: 48, // 同 minSize
globalAlpha: 0.8, // 透明度
clusterRadius: 150, // 聚合像素半径
maxClusterZoom: 18, // 最大聚合的级别
maxZoom: 19, // 最大显示级别
minPoints: 5, // 最少聚合点数,点数多于此值才会被聚合
extent: 400, // 聚合的细腻程度,越高聚合后点越密集
label: { // 聚合文本样式
show: true, // 是否显示聚合点
fillStyle: '#0A1731',
iconOptions: {
show: true, // 是否显示图像
url: 'Sean.png', // 图像url
offset: {
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;
}
// 设置图像width
var 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的参数我按自己项目的需求改了下,原版参见drawIcon
context.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、修改后的效果,可以展示图像