mapbox 批量上点图形, 并自定义点图层图标,点击点图层打开弹窗

要实现在 Mapbox 上批量上点图形并自定义点图层图标，可以使用 Mapbox GL JS 库。以下是大致的思路：

1. 创建一个 Mapbox 地图对象，设置地图的中心点，缩放级别和样式。

mapboxgl.accessToken = 'your access token here';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat],
  zoom: zoom
});

2. 定义一个数据源，该数据源包含要在地图上显示的点的坐标和属性信息。

var geojson = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [lng1, lat1]
      },
      "properties": {
        "name": "Point 1",
        "description": "Description for Point 1"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [lng2, lat2]
      },
      "properties": {
        "name": "Point 2",
        "description": "Description for Point 2"
      }
    },
    // more points...
  ]
};

3. 创建一个图层，并将数据源添加到该图层中。

map.on('load', function() {
  map.addSource('points', {
    type: 'geojson',
    data: geojson
  });

  map.addLayer({
    id: 'points-layer',
    type: 'symbol',
    source: 'points',
    layout: {
      'icon-image': 'custom-icon', // 自定义图标名称
      'icon-allow-overlap': true,
      'text-field': '{name}',
      'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
      'text-offset': [0, 0.6],
      'text-anchor': 'top'
    }
  });

  // 添加点击事件，打开弹窗
  map.on('click', 'points-layer', function(e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var description = e.features[0].properties.description;

    new mapboxgl.Popup()
      .setLngLat(coordinates)
      .setHTML(description)
      .addTo(map);
  });
});

在上面的代码中，我们使用 addSource 方法将数据源添加到地图中。然后使用 addLayer 方法创建一个名为 "points-layer" 的图层，并将该图层的类型设置为 "symbol"，表示该图层包含点标记。此外，我们还设置了自定义图标的名称和一些布局属性，例如标记重叠时是否允许重叠，标记上显示的文本等。

最后，我们使用 map.on 方法添加一个点击事件监听器，当用户单击图层中的点时，打开一个弹窗来显示该点的详细信息。

希望这个例子能帮助你实现在 Mapbox 上批量上点图形并自定义点图层图标，并且点击点图层打开弹窗。