mapbox

1、容器
<div id="map"></div>

 style: {
        // 默认级别
        zoom: 1,
        pitch: 0,
        bearing: 0,
        // 默认地图中心坐标
        center: [116.9634, 39.5421],
        sources: {},
        layers: [],
        version: 8
      }

2、定义地图

//compassengine需要引入mapbox，看他的对象是谁？
 var map = new compassengine.Map({
        container: 'map',//和html保持一致，必须是id
        style: style,//自己自定义或者一个找到的地址
        maxZoom: 20,//地图最大显示级别
        epsg: this.epsg,//坐标系 epsg：‘ESPG:3857'墨卡托 "ESPG:4490" 经纬度
        version: 8
      })
      this.map = window.map = map//这样可以可以在控制台打印地图相关

3、加载地图

map.on('load', () => {
        // 设置滚轮缩放级别的差率
        map.scrollZoom.setWheelZoomRate(1)
      this.imgLayer(map)//地图加载之后才能操作的属性：比如添加图层
      })

4、添加数据源、添加图层
图层越在后，越在最上面=先进后出

 imgLayer (map) {
      map.addSource('img', {//数据源id
        tileSize: 512,
        tiles: [CONFIG.imgUrl],//还可以用url，用url就不用写tileSize
        type: 'raster'，//数据源类型，如果是vector就不用写tileSize
        maxzoom: 18//数据源切片开始的最大级别，需要问后端，或者自己找到，要不然就是默认的切片大小
      })
      map.addLayer({
        id: 'layer_' + 'img',//图层id
        source: 'img',//数据源id
        type: 'raster',//图层类型，如果数据源类型是vector,这里需要写point、line、fill、symbol, 需要添加'source-layer': 需要问后端，
        minzoom: 17,//最小级别
        maxzoom: 21//最大级别显示到20级
      })
    },