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%;
}