mapbox常用方法记载

1.初始化地图
 this.map = new this.$mapboxgl.Map({
        container: ‘map’,
        style: this.mapStyles[0],
        center: [112.010562192, 31.2093162501],
        zoom: 6.3,
        minZoom: 5,
        maxZoom: 12,
        pitch: 0 //视野倾斜，0-60
        // bearing: -17.6,//视野旋转角度
      })
2.添加聚合点
 this.map.addSource(‘earthquakes’, {
          type: ‘geojson’,
          data: data,
          cluster: true,
          clusterMaxZoom: 7,
          clusterRadius: 20
        })
//聚合点
 this.map.addLayer({
          id: ‘cluster-count’,
          type: ‘symbol’,
          source: ‘earthquakes’,
          filter: [‘has’, ‘point_count’],
          layout: {
            ‘icon-image’: ‘cluster-marker’,
            ‘text-field’: ‘{point_count_abbreviated}’,
            ‘text-font’: [‘DIN Offc Pro Medium’, ‘Arial Unicode MS Bold’],
            ‘text-size’: 12
          }
        })
//不聚合的图层样式
        this.map.addLayer({
          id: ‘unclustered-pointtit’,
          type: ‘symbol’,
          source: ‘earthquakes’,
          filter: [’!’, [‘has’, ‘point_count’]],
          layout: {
            ‘icon-image’: ‘custom-marker’,
            ‘icon-size’: 0.8,
            ‘text-field’: [‘get’, ‘ycaa01a003’], //获取显示的参数
            ‘text-size’: 12,
            ‘text-font’: [‘Open Sans Semibold’],
            ‘text-offset’: [0, 1.25],
            ‘text-anchor’: ‘top’
          },
          paint: {
            ‘text-color’: ‘#8e8b8b’
          }
        })
3.添加图片
this.map.loadImage(’/static/icon/point.png’, (error, image) => {}）
 layout: {
            ‘icon-image’: ‘custom-marker’,
            ‘icon-size’: 0.8,
            ‘text-field’: [‘get’, ‘ycaa01a003’], //获取显示的参数
            ‘text-size’: 12,
            ‘text-font’: [‘Open Sans Semibold’],
            ‘text-offset’: [0, 1.25],
            ‘text-anchor’: ‘top’
          },
4.添加热力图
 this.map.addLayer({
        id: ‘virus-heatmap’,
        type: ‘heatmap’,
        source: ‘earthquakes’,
        maxzoom: 9,
        paint: {
          // Increase the heatmap weight based on frequency and property magnitude
          ‘heatmap-weight’: [
            ‘interpolate’,
            [‘linear’],
            [‘get’, ‘mag’],
            0,
            0,
            3,
            1
          ],
          // Increase the heatmap color weight weight by zoom level
          // heatmap-intensity is a multiplier on top of heatmap-weight
          ‘heatmap-intensity’: [
            ‘interpolate’,
            [‘linear’],
            [‘zoom’],
            5,
            3,
            9,
            3
          ],
          // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
          // Begin color ramp at 0-stop with a 0-transparancy color
          // to create a blur-like effect.
          ‘heatmap-color’: [
            ‘interpolate’,
            [‘linear’],
            [‘heatmap-density’],
            0,
            ‘rgba(33,102,172,0)’,
            0.2,
            ‘rgb(103,169,207)’,
            0.4,
            ‘rgb(209,229,240)’,
            0.6,
            ‘rgb(253,219,199)’,
            0.8,
            ‘rgb(239,138,98)’,
            1,
            ‘rgb(178,24,43)’
          ],
          // Adjust the heatmap radius by zoom level
          ‘heatmap-radius’: [‘interpolate’, [‘linear’], [‘zoom’], 5, 30, 9, 20],
          // Transition from heatmap to circle layer by zoom level
          ‘heatmap-opacity’: [‘interpolate’, [‘linear’], [‘zoom’], 5, 1, 9, 0]
        }
      })
      this.map.addLayer({
        id: ‘virus-heatmap-point’,
        type: ‘circle’,
        source: ‘earthquakes’,
        minzoom: 8,
        paint: {
          // Size circle radius by earthquake magnitude and zoom level
          ‘circle-radius’: [
            ‘interpolate’,
            [‘linear’],
            [‘zoom’],
            7,
            [‘interpolate’, [‘linear’], [‘get’, ‘mag’], 1, 1, 6, 4],
            16,
            [‘interpolate’, [‘linear’], [‘get’, ‘mag’], 1, 5, 6, 50]
          ],
          // Color circle by earthquake magnitude
          ‘circle-color’: [
            ‘interpolate’,
            [‘linear’],
            [‘get’, ‘mag’],
            1,
            ‘rgba(33,102,172,0)’,
            2,
            ‘rgb(103,169,207)’,
            3,
            ‘rgb(209,229,240)’,
            4,
            ‘rgb(253,219,199)’,
            5,
            ‘rgb(239,138,98)’,
            6,
            ‘rgb(178,24,43)’
          ],
          ‘circle-stroke-color’: ‘white’,
          ‘circle-stroke-width’: 1,
          // Transition from heatmap to circle layer by zoom level
          ‘circle-opacity’: [‘interpolate’, [‘linear’], [‘zoom’], 7, 0, 8, 1]
        }
      })
5.添加wmts图层
 this.map.addLayer({
        id: data.link,
        type: ‘raster’,
        source: {
          type: ‘raster’,
          tiles: [
            ‘http://localhost:8080/geoserver/gwc/service/wmts?layer=’ +
              data.link +
              ‘&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile’ +
              ‘&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}’
          ],
          minzoom: 0,
          maxzoom: 12
        }
        //‘source-layer’: ‘L-HBSlopeElement’ //图层名称，图层、图层组名称注意和GeoServer发布的对应
      })
6.切换style,并重载之前的图层
//重置防抖
      this.timeout = null
      this.map.setStyle(this.mapStyles[parseInt(index)]) //设置地图风格
      this.map.on(‘style.load’, () => {
        //load会加载多次添加防抖获取最后一次的数据
        if (this.timeout) {
          clearTimeout(this.timeout)
        }
        this.timeout = setTimeout(() => {
          this.addYhdLayers(yhdData, status)
        }, 500)
      })