下载安装

npm i mapbox-gl

导入

import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

加载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',
    'fill-opacity': 0.8
  }
});