Common attributes and cases of MapBox

1. Positioning

//跳转

this.map.jumpTo({
    
     center: city.geometry.coordinates });
}, 2000 * index);
//飞行
this.map.flyTo({
    
    
        center: [114.23774842192483, 30.52603116857425],
        essential: true 
      })

Two, get all layers

var layers = this.map.getStyle().layers

Three, monitor the map zoom event

this.map.on('moveend', () => {
    
    
        console.log(this.map.getZoom())
        // if(e.moveend&&e.moveend=="111"){
    
    
        //   //查询操作
            // }
      })

Four, eagle eye

//引入minimap插件
this.map.addControl(
          new mapboxgl.Minimap({
    
    
            id: 'mapboxgl-minimap',
            width: '320px',
            height: '180px',
            style: 'mapbox://styles/tyy-sj/ck9c4cqa301rg1ipfeaiywr9x',
            center: [114.23774842192483, 30.52603116857425],
            zoom: 15,
            // 应该是一个函数；将被绑定到小地图
            zoomAdjust: null,
            zoomLevels: [
              [18, 11, 15],
              [16, 10, 12],
              [14, 8, 11],
              [12, 6, 8],
              [10, 4, 6]
            ],
            lineColor: '#08F',
            lineWidth: 1,
            lineOpacity: 1,
            fillColor: '#F80',
            fillOpacity: 0.25,
            dragPan: false,
            scrollZoom: false,
            boxZoom: false,
            dragRotate: false,
            keyboard: false,
            doubleClickZoom: false,
            touchZoomRotate: false
          }),
          'bottom-left'
        )

Five, heat map

//引入 geojson
 this.map.addSource('trees', {
    
    
        type: 'geojson',
        data: 'geojson/trees.geojson'
        // data:asd
      })
      //放大后的热力点
      this.map.addLayer(
        {
    
    
          id: 'trees-heat',
          type: 'heatmap',
          source: 'trees',
          maxzoom: 15,
          paint: {
    
    
            'heatmap-weight': {
    
    
              property: 'dbh',
              type: 'exponential',
              stops: [
                [1, 0],
                [62, 1]
              ]
            },
            'heatmap-intensity': {
    
    
              stops: [
                [11, 1],
                [15, 3]
              ]
            },
            'heatmap-color': [
              'interpolate',
              ['linear'],
              ['heatmap-density'],
              0,
              'rgba(236,222,239,0)',
              0.2,
              'rgb(208,209,230)',
              0.4,
              'rgb(166,189,219)',
              0.6,
              'rgb(103,169,207)',
              0.8,
              '#ec1010'
            ],
            'heatmap-radius': {
    
    
              stops: [
                [11, 15],
                [15, 20]
              ]
            },
            'heatmap-opacity': {
    
    
              default: 1,
              stops: [
                [14, 1],
                [15, 0]
              ]
            }
          }
        },
        'waterway-label'
      )
//缩小时的热力图      
this.map.addLayer(
        {
    
    
          id: 'trees-point',
          type: 'circle',
          source: 'trees',
          minzoom: 14,
          paint: {
    
    
            'circle-radius': {
    
    
              property: 'dbh',
              type: 'exponential',
              stops: [
                [{
    
     zoom: 15, value: 1 }, 5],
                [{
    
     zoom: 15, value: 62 }, 10],
                [{
    
     zoom: 22, value: 1 }, 20],
                [{
    
     zoom: 22, value: 62 }, 50]
              ]
            },
            'circle-color': {
    
    
              property: 'dbh',
              type: 'exponential',
              stops: [
                [0, 'rgba(236,222,239,0)'],
                [10, 'rgba(242, 29, 196, 0)'],
                [20, 'rgb(208,209,230)'],
                [30, 'rgb(166,189,219)'],
                [40, 'rgb(103,169,207)'],
                [50, 'rgb(28,144,153)'],
                [60, '#ec1010']
              ]
            },
            'circle-stroke-color': 'white',
            'circle-stroke-width': 1,
            'circle-opacity': {
    
    
              stops: [
                [14, 0],
                [15, 1]
              ]
            }
          }
        },
        'waterway-label'
      )

Six, show and hide

this.map.setLayoutProperty('points', 'visibility', 'none')