mapbox的expressions应用

1、地图底图配色

createMap(container, options) {
    const map = new mapboxgl.Map(Object.assign({
      container,
      hash: process.env.NODE_ENV === 'development',
      style: {
        version: 8,
        glyphs: `${server.url ? server.url : window.location.origin}/iserver/services/map-${process.env.VUE_APP_SERVICE}/rest/maps/${process.env.VUE_APP_MAP}/tileFeature/sdffonts/{fontstack}/{range}.pbf`,
        sources: {
          vec: {
            type: 'raster',
            tiles: ['https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=' + process.env.VUE_APP_TDT_TOKEN],
            tileSize: 256,
          },
          cva: {
            type: 'raster',
            tiles: ['https://t0.tianditu.gov.cn/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=' + process.env.VUE_APP_TDT_TOKEN],
            tileSize: 256,
          },
          szvec: {
            type: 'raster',
            tileSize: 256,
            // xyz形式，原生支持
            tiles: ['https://zhswtest.hdec.com/arcgis/rest/services/szmap/MapServer/tile/{z}/{y}/{x}'],
            minzoom: 18,
            maxzoom: 20,
          },
          sva: {
            type: 'raster',
            tileSize: 256,
            // xyz形式，原生支持
            tiles: ['https://zhswtest.hdec.com/arcgis/rest/services/szmap_anno/MapServer/tile/{z}/{y}/{x}'],
            minzoom: 18,
            maxzoom: 20,
          },
          img: {
            type: 'raster',
            tiles: ['https://t0.tianditu.gov.cn/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=' + process.env.VUE_APP_TDT_TOKEN],
            // tiles: ['http://localhost:8081/{z}/{x}/{y}.png'],
            tileSize: 256,
          },
          cia: {
            type: 'raster',
            tiles: ['https://t0.tianditu.gov.cn/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=' + process.env.VUE_APP_TDT_TOKEN],
            tileSize: 256,
          },
          szimg: {
            type: 'raster',
            tileSize: 256,
            // xyz形式，原生支持
            tiles: ['https://zhswtest.hdec.com/arcgis/rest/services/szimage/MapServer/tile/{z}/{y}/{x}'],
            minzoom: 18,
            maxzoom: 20,
          },
        },
        layers: [
          {
            id: 'background',
            type: 'background',
            paint: {
              'background-color': '#ffffff'
            }
          }, {
            id: 'vec',
            type: 'raster',
            source: 'vec',
            maxzoom: 17,
            layout: {
              visibility: 'none'
            },
            paint: {
              'raster-opacity': [
                'interpolate', ['linear'], ['zoom'],
                4, 1,
                12, 0.4
              ],
              'raster-saturation': [
                'interpolate', ['linear'], ['zoom'],
                4, 0,
                12, -0.8
              ]
            }
          }, {
            id: 'cva',
            type: 'raster',
            source: 'cva',
            maxzoom: 10,
            layout: {
              visibility: 'none'
            },
          }, {
            id: 'szvec',
            type: 'raster',
            source: 'szvec',
            minzoom: 17,
            layout: {
              visibility: 'none'
            },
            paint: {
              'raster-opacity': 0.5,
              'raster-saturation': -0.8
            }
          }, {
            id: 'sva',
            type: 'raster',
            source: 'sva',
            minzoom: 17,
            layout: {
              visibility: 'none'
            },
          }, {
            id: 'img',
            type: 'raster',
            source: 'img',
            maxzoom: 17,
            layout: {
              visibility: 'none'
            },
            paint: {
              // 'raster-opacity': [
              //   'interpolate', ['linear'], ['zoom'],
              //   4, 1,
              //   12, 0.4
              // ],
              'raster-saturation': [
                'interpolate', ['linear'], ['zoom'],
                4, 0,
                12, -0.5
              ]
            }
          }, {
            id: 'cia',
            type: 'raster',
            source: 'cia',
            maxzoom: 10,
            layout: {
              visibility: 'none'
            },
          }, {
            id: 'szimg',
            type: 'raster',
            source: 'szimg',
            minzoom: 17,
            layout: {
              visibility: 'none'
            },
            paint: {
              // 'raster-opacity': 0.5,
              'raster-saturation': -0.5
            }
          }
        ]
      },
      crs: crs.EPSG4490,
      center: [114.044, 22.545],
      zoom: 12,
      minZoom: 4,
      maxZoom: 24,
      boxZoom: true,
      pitchWithRotate: false,
      // fadeDuration: 0,
      preserveDrawingBuffer: true,
      touchZoomRotate: { around: 'center' },
      trackResize: false,
      locale: {
        'FullscreenControl.Enter': '全屏',
        'FullscreenControl.Exit': '退出',
        'NavigationControl.ResetBearing': '复位',
        'NavigationControl.ZoomIn': '放大',
        'NavigationControl.ZoomOut': '缩小',
      }
    }, options));

    return map;
  }