javascript - 如何将标签添加到 map 框中的多边形

Question

我要在 map 框中的多边形上添加标签，顺便说一句，我找不到如何添加标签的解决方案。

我找到了向点添加标签的方法。

map.addLayer({
    "id": "points",
    "type": "symbol",
    "source": {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-77.03238901390978, 38.913188059745586]
                },
                "properties": {
                    "title": "Mapbox DC",
                    "icon": "monument"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-122.414, 37.776]
                },
                "properties": {
                    "title": "Mapbox SF",
                    "icon": "harbor"
                }
            }]
        }
    },
    "layout": {
        "icon-image": "{icon}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    }
});

因此，我尝试使用上述解决方案将标签添加到 map 框中的多边形，但失败了。

请帮助我!

Answer 1

您很可能希望将多边形转换为点并将其用作标签源。

您可以直接在应用程序中使用 https://github.com/mapbox/polylabel 执行此操作或事先与 https://github.com/andrewharvey/geojson-polygon-labels