MineMap 点聚合替换图标加数字效果的实现

目录

0.先放一张简陋的效果图吧~

1.如何加载自定义图标

2.如何使用设置的图标

3.点聚合的数字设置，就是每一个图标上方的数字样式设置

---

0.先放一张简陋的效果图吧~

本质就是利用地图加载自定义的图标+ 数字图层设置

1.如何加载自定义图标

利用地图的map.loadImage(url,callback)方法，官网用法如下：

url是图片的引用路径，callback是一个错误是回调

 引用代码如下：

map.loadImage(require('@/assets/img/gis-sp.png'), function (error, image) {
  if (error) throw error;
 map.addImage('diyIconName', image); // 添加自定义图标，其中diyIconName是我们对图标起的名字
});

 这样就引用成功了，使用的时候直接我们刚刚命名的diyIconName即可

2.如何使用自定义的图标

加载图层的时候，设置图层类型未symbol，layout引用icon-image:‘diyIconName’即可，代码及贴图如下~

map.addLayer({
  "id": "circle-layer-base-" + id,
  "source": "pointSource-" + id,
  "type": "symbol",
  "filter": ["!has", "point_count"],
  "layout": {
    "icon-image": 'diyIconName',
  }
});

 

3.点聚合的数字设置，就是每一个图标上方的数字样式设置

代码如下，核心就是加注释的几行啦~好累，不想解释，注释非常清晰了

// 添加数量图层
map.addLayer({
  "id": "cluster-count-" + id,
  "type": "symbol",
  "source": "pointSource-" + id,
  "layout": {
    "text-field": "{point_count}",
    "text-size": 14,
    "icon-image": id,
    "icon-allow-overlap": true // ！是否允许图标遮罩
  },
  "paint": {
    "text-color": "rgba(0,0,0,0.9)",
    "text-opacity": 1, //文本不透明度，默认值为1，值类型为number
    "text-halo-width": 5, //光晕到文本轮廓的距离，默认值为0，值类型为number，单位是像素
    "text-halo-blur": 15, //从里到外光环渐渐变淡，默认值为0，值类型为number，单位是像素
    "text-halo-color": "rgba(255, 255, 255, 1)", //文本光环的颜色，有助于它从背景中脱颖而出，默认值为"rgba(0, 0, 0, 0)"，值类型为color字符串
    "text-translate": [0,-45], //文本相对于锚点的偏移。值是[x，y]，正值表示右和下，负数分别表示左和上，默认值为[0,0]，值类型为array，单位是像素
    "text-translate-anchor": "map", //text-translate的锚点，可选值有"map"(默认值，文本相对于地图进行偏移)，"viewport"(文本相对于视区进行偏移)
  },
  "filter": ["has", "point_count"]
});

 

又是一篇略水的帖子，因为自己立的flag,至少一周记录一个知识点，今天爆肝也得爬起来写一篇帖子，还有祝大家中秋节快乐叭~

祝我也快乐~