BMapGL+mapvgl点聚合显示，点位名称和聚合数量

引入 npm i mapvgl

官方文档：MapVGL | 快速入门 (baidu.com)

引入的方式直接看官网吧

index.html

  <script type="text/javascript"src="https://api.map.baidu.com/getscriptv=1.0&type=webgl&ak=**"></script>
  <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>

核心代码

 const map = new BMapGL.Map("map");
      map.enableScrollWheelZoom(true);
      map.setMapStyleV2({
        styleId: "8491ee2a814eb93b56bd864ec2996fa3",//引入地图样式
      });
      map.addEventListener("zoomend", () => {
        const zoom = map.getZoom();
        if (zoom > 18 || zoom < 6) {
          map.setZoom(6); // 如果缩放超出限制的级别，重置为允许的级别
        }
      });
      map.centerAndZoom(new BMapGL.Point(120.81100309153925, 27.91836373710549),12
      );//设置地图的中心点

    var value = data//后端给的点位数据
    var geojsonData = []; //存放数据
   value.forEach((item) => {
        geojsonData.push({
          geometry: {
            type: "Point",
            coordinates: [item.lng, item.lat],
          },
          properties: {
            cluster: true, //判断是否聚合,
            text: item.name, 
            icon: require("../assets/imgs/map定位点.png"),
            offset: [0, 40],
            width: 130,
            height: 110,
          },
        });
      });
//properties里面一定要放cluster: true，否则，只会显示聚合数量，点位名称是不显示的！！！！！！
  console.log("geojsonData", geojsonData);

     const view = new mapvgl.View({
        map: map,
      });

      var iconClusterLayer = new mapvgl.IconClusterLayer({
        data: geojsonData, //加载数据
        minSize: 25,
        maxSize: 40,
        showText: true, //显示文字
        textOptions: {
          fontSize: 18,
          color: "white",
          format: function (count) {
// 啊嗯，如果聚合了，properties.text就会显示数据，没聚合就会是点位名称
//这个count 其实输出的是properties.text
            return count; 
          },
        },
        iconOptions: {
          offset: [0, 0],
          width: 40,
          height: 40,
        },
        iconExtent: {
          0: "https://a.amap.com/jsapi_demos/static/images/blue.png",
          5: "https://a.amap.com/jsapi_demos/static/images/green.png",
          10: "https://a.amap.com/jsapi_demos/static/images/orange.png",
          15: "https://a.amap.com/jsapi_demos/static/images/red.png",
          34: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
        },
        enablePicked: true,
        onClick: (e) => {
          // if (!e.dataItem) {
          //   return;
          // }
          const { id, children, geometry, properties } = e.dataItem;
          if (children) {
            console.log(children, "点击了聚合点");
          } else {
            console.log(properties, "点击了Marker");
          }
        },
      });
      view.addLayer(iconClusterLayer);

最终的效果图:

 

 如果有大佬有跟好的解决办法请指教，互相进步！！！！！！

注释要看哦。