javascript - 如何使用 GeoJSON 在 mapbox map 多边形上显示标签

Question

我想使用 GeoJSON 数据在 mapbox map 上显示自定义标签，我在功能 properties 下添加了 name 和 color 我想显示为一个区域的多边形填充颜色，我不知道该怎么做，我搜索了很多但在这个主题上一无所获，我是 MapBox 的新手需要你的帮助:

JSFiddle Demo

这是代码

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [55.2324,25.073], // starting position
    zoom: 12 // starting zoom
});

// Draw map
var draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
        polygon: false,
        trash: false
    }
});

map.addControl(draw);

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());

var featureCollection = {
    "type": "FeatureCollection",
    "features": [
           {
              "type":"Feature",
              "geometry":{
                 "type":"Polygon",
                 "coordinates":[
                    [
                       [
                          53.34234777435083,
                          24.03841558494339
                       ],
                       [
                          53.63384239941877,
                          23.980642073807147
                       ],
                       [
                          53.87583793720404,
                          24.01330148955786
                       ],
                       [
                          53.67509163882116,
                          23.678780532068288
                       ],
                       [
                          53.691591334582085,
                          23.436787672921128
                       ],
                       [
                          53.13885152669846,
                          23.55531902255817
                       ],
                       [
                          53.136101577392935,
                          23.980642073807147
                       ],
                       [
                          53.34234777435083,
                          24.03841558494339
                       ]
                    ]
                 ]
              },
              "properties":{
                 "id":1,
                 "name":"East Zone",
                 "color":"#ccccff",
                 "is_shutdown":false,
                 "is_active":true
              }
           },
           {
              "type":"Feature",
              "geometry":{
                 "type":"Polygon",
                 "coordinates":[
                    [
                       [
                          54.41277432573249,
                          24.17109802219355
                       ],
                       [
                          54.40221419428706,
                          23.93479580896283
                       ],
                       [
                          54.40190486287914,
                          23.752296533243648
                       ],
                       [
                          54.24386990803268,
                          23.813378685606605
                       ],
                       [
                          54.12084722599417,
                          24.09616522759087
                       ],
                       [
                          54.41277432573249,
                          24.17109802219355
                       ]
                    ]
                 ]
              },
              "properties":{
                 "id":2,
                 "name":"West Zone",
                 "color":"#ffcc33",
                 "is_shutdown":false,
                 "is_active":true
              }
           },
           {
              "type":"Feature",
              "geometry":{
                 "type":"Polygon",
                 "coordinates":[
                    [
                       [
                          55.01084972481446,
                          24.07274717129389
                       ],
                       [
                          55.04794143668033,
                          23.858563232484837
                       ],
                       [
                          54.967647759445896,
                          23.5905998890601
                       ],
                       [
                          54.901748431837575,
                          23.38814119539755
                       ],
                       [
                          54.58976976470866,
                          23.47439441289948
                       ],
                       [
                          54.41317073001387,
                          23.67920953874405
                       ],
                       [
                          54.43980120450599,
                          24.219099932016256
                       ],
                       [
                          54.72318029018409,
                          24.176836888624475
                       ],
                       [
                          55.01084972481446,
                          24.07274717129389
                       ]
                    ]
                 ]
              },
              "properties":{
                 "id":3,
                 "name":"South Zone",
                 "color":"#07ac25",
                 "is_shutdown":false,
                 "is_active":true
              }
           }
        ]
};

var bbox = turf.bbox(featureCollection);
map.on('load', function () {
    featureCollection.features.forEach(function (feature) {
        draw.add(feature);
    })
});

map.fitBounds(bbox, { padding:  40});

Answer 1

您需要定义代表多边形标签的点并使用符号层。生成标签点的一种方法是 https://github.com/mapbox/polylabel