百度地图-mapv-聚合点图标使用自定义图像

遇到个需求是点聚合需要使用图片,官方文档没找到解决办法,所以自己修改了下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、修改后的效果,可以展示图像
在这里插入图片描述

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值