很多时候，我们在使用地图的时候，用的并不是mapbox提供的底图，而是我们自己的数据。

这里以Geojson（json）数据为例。

STEP 1 （数据定义）

将自己的数据加载，同时赋予名称。

import CHINAMAP from '@/assets/mapdata/china.json'

STEP 2 （创建空地图容器）

既然是使用mapbox，那么首先需要创建一个地图容器，但是由于我们不使用mapbox底图，因此，与普通创建mapbox地图的区别在于style，这一参数的定义。

（其余配置参考系列文章一）

var map = new this.$mapboxgl.Map({
        container: "map",
        style: {
          version: 8,
          sources: {},
          layers: [
            {
              id: "background",
              type: "background",
              layout: {},
              paint: {
                "background-color": [
                  "interpolate",
                  ["linear"],
                  ["zoom"],
                  5,
                  "hsl(38, 43%, 89%)",
                  7,
                  "hsl(38, 48%, 86%)",
                ],
              },
            },
          ],
        },
        zoom: 5,
        center: [109, 38],
      });

STEP 3 （加载数据）

mapbox中加载资源所使用，map.on(){'load',}函数。

首先加载资源，再加载图层，即可。

map.on('load',function(){
        map.addSource('states', {
            'type': 'geojson',
            'data': CHINAMAP
        });
        map.addLayer({
            'id': 'china_map',
            'type': 'fill',
            'source': 'states',
            'paint': {
                'fill-color':'#0080ff',
                'fill-outline-color': '#4f4f4f',
                'fill-opacity':[
                    'case',
                    ['boolean', ['feature-state', 'hover'], false],
                    1,
                    0.8
                    ]
            }
        });
      })

结果展示：