百度地图在React-BMapGL中MapVGL中的点聚合图层中的每个点如何设置不一样的文字内容 代码实现

在React-BMapGL中使用MapVGL创建点聚合图层，可以通过以下代码来为每个点设置不同的文字内容：

import React, { useRef, useEffect } from "react";
import { Map, MapvglView, MapvglLayer } from "react-bmapgl";
import MapvGL from "mapvgl";
import "mapvgl/dist/mapvgl.css";

const MapContainer = (props) => {
  const mapRef = useRef(null);

  useEffect(() => {
    const map = mapRef.current.getMap();
    const mapvgl = new MapvGL(map);

    // 创建数据源，包含多个点的属性
    const data = [
        {lng: 116.404, lat: 39.915, name: "点1", text: "这是点1"},
        {lng: 116.417, lat: 39.921, name: "点2", text: "这是点2"},
        {lng: 116.390, lat: 39.914, name: "点3", text: "这是点3"},
        // ...
    ];

    // 创建聚合点模板，用来动态生成每个点的显示内容
    const template = [
        {
            type: "point",
            size: 20,
            shape: "circle",
            fillStyle: "rgba(255, 0, 0, 0.6)",
            label: {
                show: true,
                content: function (data) {
                    // 根据数据源中的属性值生成点的文字内容
                    return data.text;
                },
                fontSize: 14,
                fontWeight: "bold",
                fillStyle: "white",
                strokeStyle: "black",
                strokeWidth: 2,
                padding: [5, 10],
                backgroundColor: "rgba(0, 0, 0, 0.6)",
                borderRadius: 10,
                anchor: "bottom"
            }
        }
    ];

    // 创建点聚合图层，并添加到MapvGL中
    const layer = new MapvGL.ClusterLayer({
        mapvgl: mapvgl,
        zIndex: 10,
        data: data,
        gridSize: 80,
        render: "canvas",
        width: 500,
        height: 500,
        unit: "px",
        label: template
    });

    // 将聚合点图层添加到地图中
    mapvgl.addLayer(layer);

    // 设置地图中心点和缩放级别
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
  }, []);

  return (
    <Map center={props.center} zoom={props.zoom} ref={mapRef}>
      <MapvglView />
      <MapvglLayer />
    </Map>
  );
};

export default MapContainer;

在上述代码中，我们在useEffect钩子中创建了MapvGL实例，并使用上面提到的方法来创建数据源和聚合点模板。然后，创建点聚合图层，并将其添加到MapvGL实例中。最后，将MapvglView和MapvglLayer组件添加到地图中，就可以在React-BMapGL中显示每个点不同的文字内容了。