使用 Mapbox 指定营业地点的坐标

Question

我确信这是一件非常简单的事情，但是我如何使用 Mapbox 为地图添加坐标？该产品是嵌入在网站上的简单地图，在商店位置带有标记。业务位于西非加纳。坐标为[5.6513286, -0.1945831].

<script>
mapboxgl.accessToken = '';
var map = new mapboxgl.Map({
container: 'map',
center: [5.6513286, -0.1945831],
zoom: 5,
style: 'mapbox://styles/kopoku/ck826mkp719ne1iruuq8bpjmk'
});

var marker = new mapboxgl.Marker()
  .setLngLat([5.6513286, -0.1945831])
  .addTo(map);


</script>

Answer 1

为此，您需要向地图添加 GeoJSON source containing the coordinate as a GeoJSON feature, and a symbol layer whose text-field property is set to a string containing the coordinates to be displayed using a get expression:

map.on('load', function() {

  map.addSource('point', {
    'type': 'geojson',
    'data': {    
      // feature for the coordinate to display
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [-0.1945831, 5.6513286]
      },
      'properties': {
        'coordinates': '[-0.1945831, 5.6513286]',
      }
    }
  });

  map.addLayer({
    'id': 'point',
    'type': 'symbol',
    'source': 'point',
    'layout': {
      // get the coordinates from the source's "coordinates" property
      'text-field': ['get', 'coordinates'],
      'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
    }
  });

});

另外，请注意，我将中心坐标的顺序 [5.6513286, -0.1945831] 更改为 [-0.1945831, 5.6513286]，因为原始点位于海洋而不是加纳。这表明原始纬度和经度值被翻转了。

这是一个包含所有代码的 JSFiddle：https://jsfiddle.net/yLz29m1g/。请注意，您需要在指定位置添加自己的 Mapbox 访问令牌才能查看结果。这是预览的屏幕截图：

使用 Mapbox 指定营业地点的坐标

Using Mapbox to specify coordinates for a business location

mapbox