mapbox 聚合图

话不多说先看效果图

要实现的功能就是按照根据省份展示出各省上传的数据量

首先我们可以查看 mapboxgl官网有一个例子地址如下： https://docs.mapbox.com/mapbox-gl-js/example/cluster/

可以复制过来直接查看是否有聚合图

是这样的之后我想把数据的颜色变得有些透明的颜色，将字体的颜色改成白色的

https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers-circle  这个链接就是修改circle样式的，

mapboxgl.accessToken =
       '<your access token here>';;

    var map = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-65.017, -16.457],
      zoom: 5
    });

    map.on("load", function() {
            // 从GeoJSON数据添加一个新的源并设置“cluster”选项为true。GL-JS将把point_count属性添加到源数据中。
            map.addSource("earthquakes", {
              type: "geojson",
              data:
                "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
              // data.data,//将上面的换成我所需要的
              cluster: true,
              clusterMaxZoom: 14, //最大缩放到群集点
              clusterRadius: 50 // 每一组点的半径（=50）
            });
            // 外围有数字的圆圈，加晕染
            map.addLayer({
              id: "clusters",
              type: "circle",
              source: "earthquakes",
              filter: ["has", "point_count"],
              paint: {
                //*蓝色，当点数小于100时为20px圆
                //*点计数在100到750之间时为黄色，21px圆
                //*点计数大于或等于750时为22像素的粉红色圆圈
                "circle-color": [
                  "step",
                  ["get", "point_count"],
                  "rgba(81, 187, 214, 0.8)",
                  100,
                  "rgba(241, 240, 117, 0.8)",
                  750,
                  "rgba(242, 140, 177, 0.8)"
                ],
                "circle-radius": [
                  "step",
                  ["get", "point_count"],
                  20, //蓝色，当点数小于100时为20px圆
                  100, //对应上面circle-color 数字，意思为100以内
                  21, //点计数在100到750之间时为黄色，21px圆
                  750, //对应上面circle-color 数字，意思为750以内
                  22 //点计数大于或等于750时为22像素的粉红色圆圈
                ],
                // 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color
                "circle-stroke-color": [
                  "step",
                  ["get", "point_count"],
                  "rgba(81, 187, 214, 0.2)",
                  100,
                  "rgba(241, 240, 117, 0.2)",
                  750,
                  "rgba(242, 140, 177, 0.2)"
                ],
                // 这个是外边框晕染的范围
                "circle-stroke-width": [
                  "step",
                  ["get", "point_count"],
                  5, //蓝色晕染长度，当点数小于100时为5px晕染
                  100, //对应上面circle-color 数字，意思为100以内
                  6, //点计数在100到750之间时为黄色，6px晕染
                  750, //对应上面circle-color 数字，意思为750以内
                  7 //点计数大于或等于750时为7px像素的粉红色晕染
                ]
              }
            });
            //聚合图圆圈中的数字
            map.addLayer({
              id: "cluster-count",
              type: "symbol",
              source: "earthquakes",
              filter: ["has", "point_count"],
              layout: {
                "text-field": "{point_count_abbreviated}",
                "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
                "text-size": 12
              },
              // 添加这个就可以改变圆圈内字样式，这里我改变了他的颜色
              paint: {
                "text-color": "#fff",
                "text-opacity": 1
              }
            });
            // 聚合图中没有数字的显示小圆点
            map.addLayer({
              id: "unclustered-point",
              type: "circle",
              source: "earthquakes",
              filter: ["!", ["has", "point_count"]],
              paint: {
                "circle-color": "#11b4da",
                "circle-radius": 4,
                "circle-stroke-width": 1,
                "circle-stroke-color": "#fff"
              }
            });

            // 单击时检查群集
            map.on("click", "clusters", function(e) {
              var features = map.queryRenderedFeatures(e.point, {
                layers: ["clusters"]
              });
              var clusterId = features[0].properties.cluster_id;
              map
                .getSource("earthquakes")
                .getClusterExpansionZoom(clusterId, function(err, zoom) {
                  if (err) return;
                  map.easeTo({
                    center: features[0].geometry.coordinates,
                    zoom: zoom
                  });
                });
            });

            map.on("mouseenter", "clusters", function() {
              map.getCanvas().style.cursor = "pointer";
            });
            map.on("mouseleave", "clusters", function() {
              map.getCanvas().style.cursor = "";
            });
          });

到这里我们就已经成功一半了，那么我们现在换掉mapbox官网的数据，展示我们自己的数据，

我的数据是酱紫的，所以改下数据就可以了

map.on("load", function() {
            // 从GeoJSON数据添加一个新的源并设置“cluster”选项为true。GL-JS将把point_count属性添加到源数据中。
            map.addSource("earthquakes", {
              type: "geojson",
              data:
                // "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
              data.data,//将上面的换成我所需要的
              cluster: true,
              clusterMaxZoom: 14, //最大缩放到群集点
              clusterRadius: 50 // 每一组点的半径（=50）
            });
            // 外围有数字的圆圈，加晕染
            map.addLayer({
              id: "clusters",
              type: "circle",
              source: "earthquakes",
              filter: ["has", "countTotal"],  //这个地方是返回值是countTotal，所以要改成你要展示的数字
              paint: {
                //*蓝色，当点数小于100时为20px圆
                //*点计数在100到750之间时为黄色，21px圆
                //*点计数大于或等于750时为22像素的粉红色圆圈
                "circle-color": [
                  "step",
                  ["get", "countTotal"],
                  "rgba(81, 187, 214, 0.8)",
                  100,
                  "rgba(241, 240, 117, 0.8)",
                  750,
                  "rgba(242, 140, 177, 0.8)"
                ],
                "circle-radius": [
                  "step",
                  ["get", "countTotal"],
                  20, //蓝色，当点数小于100时为20px圆
                  100, //对应上面circle-color 数字，意思为100以内
                  21, //点计数在100到750之间时为黄色，21px圆
                  750, //对应上面circle-color 数字，意思为750以内
                  22 //点计数大于或等于750时为22像素的粉红色圆圈
                ],
                // 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color
                "circle-stroke-color": [
                  "step",
                  ["get", "countTotal"],
                  "rgba(81, 187, 214, 0.2)",
                  100,
                  "rgba(241, 240, 117, 0.2)",
                  750,
                  "rgba(242, 140, 177, 0.2)"
                ],
                // 这个是外边框晕染的范围
                "circle-stroke-width": [
                  "step",
                  ["get", "countTotal"],
                  5, //蓝色晕染长度，当点数小于100时为5px晕染
                  100, //对应上面circle-color 数字，意思为100以内
                  6, //点计数在100到750之间时为黄色，6px晕染
                  750, //对应上面circle-color 数字，意思为750以内
                  7 //点计数大于或等于750时为7px像素的粉红色晕染
                ]
              }
            });
            //聚合图圆圈中的数字
            map.addLayer({
              id: "cluster-count",
              type: "symbol",
              source: "earthquakes",
              filter: ["has", "countTotal"],
              layout: {
                // "text-field": "{point_count_abbreviated}", //原来mapbox的值
                "text-field": "{countTotal}" + "\n" + "{xzqhmc}",//我们找到我们自己要展示的值
                "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
                "text-size": 12
              },
              // 添加这个就可以改变圆圈内字样式，这里我改变了他的颜色
              paint: {
                "text-color": "#fff",
                "text-opacity": 1
              }
            });
            // 聚合图中没有数字的显示小圆点
            map.addLayer({
              id: "unclustered-point",
              type: "circle",
              source: "earthquakes",
              filter: ["!", ["has", "countTotal"]],
              paint: {
                "circle-color": "#11b4da",
                "circle-radius": 4,
                "circle-stroke-width": 1,
                "circle-stroke-color": "#fff"
              }
            });

            // 单击时检查群集
            map.on("click", "clusters", function(e) {
              var features = map.queryRenderedFeatures(e.point, {
                layers: ["clusters"]
              });
              var clusterId = features[0].properties.cluster_id;
              map
                .getSource("earthquakes")
                .getClusterExpansionZoom(clusterId, function(err, zoom) {
                  if (err) return;
                  map.easeTo({
                    center: features[0].geometry.coordinates,
                    zoom: zoom
                  });
                });
            });

            map.on("mouseenter", "clusters", function() {
              map.getCanvas().style.cursor = "pointer";
            });
            map.on("mouseleave", "clusters", function() {
              map.getCanvas().style.cursor = "";
            });
          });

改下颜色因为我获取的数据量很小没有很大，最后的结果就是第一张图