mapbox加载全国及省份范围,显示多颜色动画点、迁徙线、3d柱状图等

//初始化地图
 initMap() {
      let _this = this;
      map = new mapboxgl.Map({
        container: "collection-map",//地图容器
        style: {
          version: 8,
          glyphs: "/font/{fontstack}/{range}.pbf",
          sources: {},
          layers: [
            //地图增加背景色
            {
              id: "background",
              type: "background",
              layout: { visibility: "visible" },
              paint: { "background-color": "#002B42" },
            },
          ]
        },
        center: [106.29318, 30.29],
        zoom: 4.2,
        minZoom: 3.6,
        pitch: 40,
        bearing: -8,
      });
      map.on("load", function () {
        _this.addLayer_country(); //添加国界面
        _this.addLayer_countryLine(); //添加国界线
        _this.addLabel_provience(); //添加省份标注
        _this.addLabel_provienceLine(); //添加省份边界线
        _this.addBase(); //添加地基点
        _this.addLine();//添加迁徙线路
        _this.addPowerPlant(); //添加发电厂
      });
    },
     //添加国界面
    addLayer_country() {
      map.addSource("country_Area", {
        type: "vector",
        tiles: ['http://117.175.169.58:47781/gisserver/rest/services/featureserver/vector/country_Area/{z}/{x}/{y}'],
      });
      map.addLayer({
        id: "country_Area",
        source: "country_Area",
        "source-layer": "country_Area",//source的type为vector时必须指定该值
        type: "fill",
        layout: {},
        paint: {
          "fill-opacity": 0.75,
          "fill-color": "#082958",
        },
      });
    },
    //添加国界线
    addLayer_countryLine() {
      map.addSource("country_guojiexian", {
        type: "vector",
        tiles: ['http://117.175.169.58:47781/gisserver/rest/services/featureserver/vector/country_guojiexian/{z}/{x}/{y}'],
      });
      map.addLayer({
        id: "country_guojiexian",
        source: "country_guojiexian",
        "source-layer": "country_guojiexian",//source的type为vector时必须指定该值
        type: "line",
        layout: {},
        paint: {
          "line-color": "#97C8F7",
          "line-width": 3,
          "line-opacity": 0.8,
        },
      });
    },
    //添加省份边界线
    addLabel_provienceLine() {
      map.addSource("country_Border", {
        type: "vector",
        tiles: ['http://117.175.169.58:47781/gisserver/rest/services/featureserver/vector/country_Border/{z}/{x}/{y}'],
      });
      map.addLayer({
        id: "country_Border",
        source: "country_Border",
        "source-layer": "country_Border",//source的type为vector时必须指定该值
        type: "line",
        layout: {},
        paint: {
          "line-color": "#396FB5",
          "line-width": 2,
          "line-opacity": 0.9,
        },
      });

    },
    //添加省份标注
    addLabel_provience() {
      axios.get("/json/省份标注.json").then(res=>{
        let provinceNameArr = res.data.features.slice();
        provinceNameArr.forEach((v) => {
          let xy = new mapboxgl.LngLat(v.properties.x, v.properties.y);
          const el = document.createElement("div");
          el.style.color = "#fff";
          el.style.fontSize = "14px";
          el.style.fontWeight = "bold";
          el.style.opacity = "0.6";
          const t = document.createTextNode(v.properties.name);
          el.appendChild(t);
          new mapboxgl.Marker({
            element: el, // 只支持原生的html 元素
          })
              .setLngLat(xy) // 使用geoJson 里面的center 属性来
              .addTo(map);
        });
      })
    },
    
    // 添加基地点位
    addBase() {
      let size = 100;
      // 绘制动画点
      let pulsingDot1 = {
        width: size,
        height: size,
        data: new Uint8Array(size * size * 4),

        onAdd: function () {
          var canvas = document.createElement("canvas");
          canvas.width = this.width;
          canvas.height = this.height;
          this.context = canvas.getContext("2d");
        },

        render: function () {
          var duration = 1000;
          var t = (performance.now() % duration) / duration;

          var radius = (size / 2) * 0.3;
          var outerRadius = (size / 2) * 0.7 * t + radius;
          var context = this.context;

          // draw outer circle
          context.clearRect(0, 0, this.width, this.height);
          context.beginPath();
          context.arc(
              this.width / 2,
              this.height / 2,
              outerRadius,
              0,
              Math.PI * 2
          );
          context.fillStyle = "rgba(46,129,192," + (1 - t) + ")";
          context.fill();

          // draw inner circle
          context.beginPath();
          context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
          context.fillStyle = "rgba(46,129,192,1)";
          context.strokeStyle = "white";
          context.lineWidth = 2 + 4 * (1 - t);
          context.fill();
          context.stroke();

          // update this image's data with data from the canvas
          this.data = context.getImageData(0, 0, this.width, this.height).data;

          // keep the map repainting
          map.triggerRepaint();

          // return `true` to let the map know that the image was updated
          return true;
        },
      };
      let pulsingDot2 = {
        width: size,
        height: size,
        data: new Uint8Array(size * size * 4),

        onAdd: function () {
          var canvas = document.createElement("canvas");
          canvas.width = this.width;
          canvas.height = this.height;
          this.context = canvas.getContext("2d");
        },

        render: function () {
          var duration = 1000;
          var t = (performance.now() % duration) / duration;

          var radius = (size / 2) * 0.3;
          var outerRadius = (size / 2) * 0.7 * t + radius;
          var context = this.context;

          // draw outer circle
          context.clearRect(0, 0, this.width, this.height);
          context.beginPath();
          context.arc(
              this.width / 2,
              this.height / 2,
              outerRadius,
              0,
              Math.PI * 2
          );
          context.fillStyle = "rgba(102,184,124," + (1 - t) + ")";
          context.fill();

          // draw inner circle
          context.beginPath();
          context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
          context.fillStyle = "rgba(102,184,124,1)";

          context.strokeStyle = "white";
          context.lineWidth = 2 + 4 * (1 - t);
          context.fill();
          context.stroke();

          // update this image's data with data from the canvas
          this.data = context.getImageData(0, 0, this.width, this.height).data;

          // keep the map repainting
          map.triggerRepaint();

          // return `true` to let the map know that the image was updated
          return true;
        },
      };
      // 设置基地数据(baseList为原始基地数据)
      axios.get("/json/基地点.json").then(res=>{
        let newBase = res.data.slice();
        let newArr = newBase.map((v) => {
          return {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: v.coordinates,
            },
            properties: {
              Name: v.name,
              edition: v.edition,
              offset: v.offset,
            },
          };
        });

        // 添加2种脉冲图片
        map.addImage("pulsing-dot1", pulsingDot1, { pixelRatio: 2 });
        map.addImage("pulsing-dot2", pulsingDot2, { pixelRatio: 2 });

        map.addSource("base", {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: newArr,
          },
        });

        map.addLayer({
          id: "points",
          type: "symbol",
          source: "base",
          layout: {
            "icon-image": [
              "match", //使用匹配方法
              ["get", "edition"], //匹配属性
              1, //key
              "pulsing-dot1", //value
              2, //key
              "pulsing-dot2", //value
              "pulsing-dot2", //default
            ],
            // "icon-image": "pulsing-dot2",
            "text-field": ["get", "Name"],
            "text-font": ["Open Sans Semibold,Arial Unicode MS Bold"],
            "text-size": 18,
            "text-ignore-placement": true, //文本忽略位置
            "text-offset": ["get", "offset"],
            "text-anchor": "top",
            "icon-size": 1,
            "icon-ignore-placement": true, //图标忽略位置
            // 点位过多，地图缩放时，重叠在一起的点位会隐藏，
            // 此处点位渲染了“text”和“icon”，必须同时设置“text”和"icon"的忽略位置属性，单独设置不生效
          },
          paint: {
            "text-color": "#fff",
            "text-halo-color": "#000",
            "text-halo-width": 2,
          },
        });

      })

    },
    // 添加迁徙线路，需在index.htm中引入echarts.js和EchartsLayer.js
    addLine() {
      let echartslayer;
      axios.get("/json/基地点.json").then(res=>{
        let lineList = res.data.slice();
        // 转换迁徙图数据
        let convertData = function (data) {
          let res = [];
          for (let i of data) {
            res.push({
              coords: [i.coordinates, [116.4, 39.9]], //所有基地汇总到北京
            });
          }
          return res;
        };
        // 迁徙图路线样式
        let series = [
          {
            coordinateSystem: "GLMap",
            type: "lines",
            zlevel: 1,
            effect: {
              show: true,
              period: 5,
              trailLength: 0.7,
              color: "#dff0f7",
              symbolSize: 5,
            },
            lineStyle: {
              normal: {
                color: "#5fccfa",
                width: 1,
                opacity: 0.4,
                curveness: 0.3,
              },
            },
            data: convertData(lineList),
          },
        ];
        // 设置迁徙图
        let option = {
          GLMap: {
            roam: true,
          },
          series: series,
        };

        echartslayer = new EchartsLayer(map);
        echartslayer.chart.setOption(option);
      })
    },
    //添加发电厂
    addPowerPlant(){
      function arrayGetText(defaultArray, transformArray) {
        let arr = [];
        defaultArray.forEach((e) => {
          transformArray.find((i) => {
            if (e.properties.name == i.NAME) {
              e.properties.capacity = i.capacity + "万KW";
              e.properties.capacityNum = i.capacity * 20000;
              arr.push(e);
            }
          });
        });
        return arr;
      }
      function arrayGetCircle(defaultArray, transformArray) {
        let arr = [];
        defaultArray.forEach((e) => {
          transformArray.find((i) => {
            if (e.properties.name == i.NAME) {
              //构建圆形
              // 30：半径
              // steps： 精度
              // units：单位
              // properties：属性
              arr.push(turf.circle(e.geometry.coordinates, 30, {
                steps: 128,
                units: "kilometers",
                properties: e.properties,
              }));
            }
          });
        });
        return arr;
      }
      axios.get("/json/省份.json").then(res=>{
        let provincePoint = res.data;
        axios.get("/json/发电厂.json").then(res2=>{
          let newArray = res2.data;
          provincePoint.features = arrayGetText(provincePoint.features, newArray)
          // 添加3d柱状图
          provincePoint.features = arrayGetText(provincePoint.features, newArray);
          let bars = arrayGetCircle(provincePoint.features, newArray)
          map.addSource("building", {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: bars,
            },
          });
          map.addLayer({
            id: "3d-buildings",
            source: "building",
            type: "fill-extrusion",
            paint: {
              //根据capacityNum填充不同颜色
              "fill-extrusion-color": [
                "interpolate",
                ["exponential", 1],
                ["get", "capacityNum"],
                //分类颜色设置（必须按顺序）
                5000000,
                "rgb(0, 210, 145)",
                10000000,
                "rgb(171, 255, 80)",
                15000000,
                "rgb(255, 73, 73)",
                25000000,
                "rgb(0, 255, 252)",
              ],
              //根据zoom地图缩放层级填充不同高度
              "fill-extrusion-height": [
                "interpolate",
                ["linear"],
                ["zoom"],
                4,
                0,
                14.05,
                ["get", "capacityNum"],
              ],
              "fill-extrusion-opacity": 1,
            },
          });
        })
      })

    }
```c
在这里插入代码片