mapbox-gl自定义点符号图标

在 Mapbox.js 中自定义点图标通常需要使用 Mapbox GL JS 的一些功能来实现。以下是两个简单的示例，展示了如何自定义点图标：

示例一

map.loadImage('./images/city.png',function(error,image) {
    if(error) throw error;
    map.addImage('city',image);
    
    map.addLayer({
        id: 'points',
        type: 'symbol',
        source: {
            type: 'geojson',
            data: {}
        },
        layout: {
            'icon-image': 'city',
            'icon-size': 1
        }
    })
})

示例二

1. 创建一个自定义图标：
   准备一个自定义图标，可以是一个图片文件（例如 PNG、SVG）或者使用 HTML 和 CSS 创建的一个 DOM 元素。

   <!-- 在 HTML 文件中添加以下样式 -->
   <style>
       .custom-marker {
           width: 30px;
           height: 30px;
           background-color: red;
           border-radius: 50%;
           border: 2px solid white;
           cursor: pointer;
       }
   </style>
   

2. 将自定义图标添加到地图：

   使用 Mapbox GL JS 的 map.addLayer 方法将自定义图标添加到地图中

   var customMarker = {
       type: 'Feature',
       geometry: {
           type: 'Point',
           coordinates: [longitude, latitude] // 指定经度和纬度
       },
       properties: {
           icon: 'custom-marker' // 使用自定义图标的 CSS 类名
       }
   };
   
   // 将自定义图标的 GeoJSON 特征添加到地图
   map.addLayer({
       id: 'custom-marker-layer',
       type: 'symbol',
       source: {
           type: 'geojson',
           data: customMarker
       },
       layout: {
           'icon-image': '{icon}',
           'icon-size': 1.5 // 可选：调整图标大小
       }
   });
   

   在上面的代码中，创建了一个包含自定义图标属性的 GeoJSON 特征，并将其添加到地图中。在图层的 layout 部分，我们使用了 icon-image 属性来指定图标的来源，其中 {icon} 会根据特征的 icon 属性动态获取 CSS 类名。

3. 定义交互行为（可选）：

   如果需要在点击图标时执行一些操作，可以使用 Mapbox GL JS 的事件监听器来添加交互行为。例如：

   map.on('click', 'custom-marker-layer', function (e) {
       // 在点击图标时执行的操作
       var coordinates = e.features[0].geometry.coordinates;
       // 添加你的自定义操作代码
   });
   

   在上面的示例中，监听了 custom-marker-layer 图层上的点击事件，并在点击时执行了自定义的操作。

这就是如何在 Mapbox.js 中自定义点图标的基本步骤。可以根据需要进一步扩展和修改自定义图标的样式和交互行为。

Add custom icons with Markers