加载mapbox-style地图

mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94Y2hlbmciLCJhIjoiY2pvc2o2M3dlMHJkNjNwa3dxY3llbmI0eCJ9.kC08hLTaUNWX0RKC0Fsf_w';
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
style的取值：
mapbox://styles/mapbox/streets-v11
mapbox://styles/mapbox/outdoors-v11
mapbox://styles/mapbox/light-v10
mapbox://styles/mapbox/dark-v10
mapbox://styles/mapbox/satellite-v9
mapbox://styles/mapbox/satellite-streets-v11
mapbox://styles/mapbox/navigation-preview-day-v4
mapbox://styles/mapbox/navigation-preview-night-v4
mapbox://styles/mapbox/navigation-guidance-day-v4
mapbox://styles/mapbox/navigation-guidance-night-v4
加载瓦片地图
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: {
    'version': 8,
    'sources': {
       'raster-tiles': {
          'type': 'raster',
          'tiles': [
            'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg' //在线瓦片地址
          'tileSize': 256
    'layers': [
            'id': 'simple-tiles',
            'type': 'raster',
            'source': 'raster-tiles', //与上述'sources'命名保持一致
            'minzoom': 0,
            'maxzoom': 22
  center: [-74.5, 40], // starting position
  zoom: 2 // starting zoom
加载GeoJSON图层
source加载方式有三种：url、geojson、setData
加载.geojson文件
map.addSource('some id', {
    type: 'geojson',
    data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_ports.geojson'
加载geojson格式
map.addSource('some id', {
  type: 'geojson',
  data: {
      "type": "FeatureCollection",
      "features": [{
          "type": "Feature",
          "properties": {},
          "geometry": {
              "type": "Point",
              "coordinates": [
                  -76.53063297271729,
                  39.18174077994108
利用setData修改geojson内容
map.getSource('some id').setData({
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": { "name": "Null Island" },
      "geometry": {
          "type": "Point",
          "coordinates": [ 0, 0 ]
图层layer类型type对应于点、线、面分别为：symbol、line、fill
1. 加载icon点图层
source：type设置为geojson

layer：type设置为 symbol

text字体设置：白底黑字

'text-color': 'black',

"text-halo-color": "white",

"text-halo-width": 3

map.on('load', function () {
//加载图标
  map.loadImage(
    'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png',
    function (error, image) {
      if (error) throw error;
      map.addImage('point', image);
      map.addSource('point', {
        'type': 'geojson',
        'data': {
          'type': 'FeatureCollection',
          'features': [
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [0, 0]
              'properties': {
                 'title': 'Mapbox Icon',
                 'icon': 'point'
      map.addLayer({
        'id': 'points',
        'type': 'symbol',
        'source': 'point',
        'layout': {
          'icon-image': ['get', 'icon'],
          'icon-size': 0.25,
          // get the title name from the source's "title" property
          'text-field': ['get', 'title'],
          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
          'text-offset': [0, 0.6],
          'text-anchor': 'top',
          //白底黑字
          'text-color': 'black',
          'text-halo-color': 'white',
          'text-halo-width': 3
2. 加载线图层
map.addLayer({
  'id': 'route',
  'type': 'line',
  'source': 'route',
  'layout': {
    'line-join': 'round',
    'line-cap': 'round'
  'paint': {
    'line-color': '#888',
    'line-width': 8
3. 加载面图层
map.addLayer({
  'id': 'maine',
  'type': 'fill',
  'source': 'maine',
  'layout': {},
  'paint': {
    'fill-color': '#088',