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
        }
    })
})

示例二

创建一个自定义图标：
准备一个自定义图标，可以是一个图片文件（例如 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>

将自定义图标添加到地图：
使用 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 类名。

定义交互行为（可选）：
如果需要在点击图标时执行一些操作，可以使用 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