mapbox基本使用

1. 获取所有图层

map.getStyle().layers

2. 控制图层的显示与隐藏

// 获取属性
map.getLayoutProperty('maqiaojiedao', 'visibility')
//  设置隐藏
map.setLayoutProperty('maqiaojiedao', 'visibility', 'none')
// 设置显示
map.setLayoutProperty('maqiaojiedao', 'visibility', 'visible')

3. 监听地图的缩放

map.on('moveend', () => {

  console.log(this.map.getZoom())

})

4. 鹰眼

//引入minimap插件
map.addControl(
  new mapboxgl.Minimap({
     id: 'mapboxgl-minimap',
     '320px',
     height: '180px',
     style: 'mapbox://styles/tyy-sj/ck9c4cqa301rg1ipfeaiywr9x',
     center: [119.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'
)

5. 热力图

//引入 geojson
map.addSource('trees', {
  type: 'geojson',
  data: 'geojson/trees.geojson'
  // data:asd
  })
  //放大后的热力点
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'
    )
//缩小时的热力图      
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'
      )