在Mapbox中标记GeoJSON多边形

Question

我无法在Mapbox GL JS文档中找到有关如何向GeoJSON多边形添加简单标签的任何地方，因此我在研究一些发现的示例。

我的GeoJSON的结构如下：

const gj = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": "309"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              77.34374999999999,
              54.57206165565852
            ],
            [
              124.45312499999999,
              63.074865690586634
            ],
            [
              102.65625,
              64.16810689799152
            ],
            [
              77.34374999999999,
              54.57206165565852
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
         "id": "310"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              81.9140625,
              48.22467264956519
            ],
            [
              124.45312499999999,
              51.39920565355378
            ],
            [
              122.6953125,
              59.88893689676585
            ],
            [
              81.9140625,
              48.22467264956519
            ]
          ]
        ]
      }
    }
  ]
}

我正在尝试用id字段标记多边形。

这里是什么样子：

map.addSource("maine", {
            type: "geojson",
            data: gj,
          });
          map.addLayer({
            id: "maine",
            type: "fill",
            source: "maine",
            layout: {
              "text-field": ['get','id'],
            },
            paint: {
              "fill-color": "#088",
              "fill-opacity": 0.8,
            },
          });

我遇到的问题是，当我将text-field添加到layout对象时，该图层根本不会渲染。我也搜索了Mapbox的文档以及此处的内容，但找不到添加简单标签的有效方法。

Answer 1

我发现，如果您尝试使用此库将标签添加到多边形，则首先需要从现有数据集创建一个点层并将其用于标签。

此网站帮助我弄清楚了：http://fuzzytolerance.info/blog/2016/07/15/Generate-centroid-points-from-polygons-with-Turf-js/