SOURCE

console 命令行工具 X clear

                    
>
console
mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-zh-v1',
    center: [116.40355, 39.91737],
    zoom: 11
});

const geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "name": "点位4"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          116.40355,
          39.91737
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "name": "点位1"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          116.41971588134766,
          39.945542175353026
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "name": "点位3"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          116.44615173339844,
          39.932117142232585
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "name": "点位2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          116.4554214477539,
          39.95238529624027
        ]
      }
    }
  ]
}

const textLayer = {
    id: 'org-border-text-layer',
    type: 'symbol',
    source: {
        type: 'geojson',
        data: geojson
    },
    layout: {
      'text-field': '{name}',
      // 允许重叠时显示
      "text-allow-overlap": true
    },
    paint: {
      'text-halo-width': 2,
      'text-halo-color': 'rgba(255, 0, 0, 1)'
    }
}

map.on('load', () => {
    map.addLayer(textLayer)
})
<div id='map'></div>
html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
#map {
    width: 100%;
    height: 100%;
}

本项目引用的自定义外部资源