如何使用 GeoJSON 在地圖框地圖多邊形上顯示標簽

Question

我想使用 GeoJSON 數據在 mapbox 地圖上顯示自定義標簽，我在要素properties下添加了name ，其color我想顯示為區域的多邊形填充顏色，我不知道該怎么做，我搜索了一個很多，但在這個主題上一無所獲，我對 MapBox 很陌生，需要您的幫助：

JSFiddle 演示

這是代碼

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

您需要定義代表多邊形標簽的 Point 並使用 Symbol 圖層。 生成標簽點的一種方法是https://github.com/mapbox/polylabel

Answer 2

您可以使用 turf 庫找到多邊形的質心，然后您可以使用符號層。