mapbox 图标注释

### 如何在 Mapbox 中实现地图图层的标注与注释功能 #### 使用符号图层 (Symbol Layer) 为了在 Mapbox 地图上添加或自定义图层注释，推荐使用符号图层来展示图标和文本。这不仅提高了性能，还增强了视觉效果。 创建符号图层前需准备两个要素：源(Source) 和 图层(Layer)[^2]。具体来说： - **Source**: 数据源可以是 GeoJSON 或矢量瓦片形式的数据集。 - **Layer**: 符号图层允许开发者通过 `icon-image` 属性指定图标名称以及利用 `text-font` 设置文字字体风格[^4]。 下面是一个简单的例子，展示了如何向 Mapbox 添加带有图标和标签的标记点: ```javascript map.on('load', function () { // Add a source and layer for the markers. map.addSource('markers', { "type": "geojson", "data": { "type": "FeatureCollection", "features": [{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [-73.981558, 40.766982] }, "properties": { "title": "Central Park" } }] } }); // Add a symbol layer to display icons or text on top of points from our geojson data source. map.addLayer({ "id": "marker-layer", "type": "symbol", "source": "markers", "layout": { "icon-image": "{icon}-15", // Use sprite sheet images defined by property value in features array above "text-field": ["get", "title"], // Display title as label next to marker image "text-offset": [0, 0.6], "text-anchor": "top" } }); }); ``` 此代码片段会在纽约中央公园的位置放置一个带有所选样式的图标，并附有位置名作为说明文字。 对于大量数据点的情况，建议采用上述方法而非传统的单个 Marker 对象方式，因为后者可能导致浏览器渲染效率低下，在处理上千甚至更多数量级的数据时尤为明显[^3]。