Разный цвет для каждого многоугольника в многополигоне в mapbox

Question

В приведенном ниже коде вы найдете мультиполигон из 3-х полигонов, отображенных в Mapbox.

Я хотел бы заполнить 3 многоугольника разными цветами.Как мне это сделать?

Если я использую свойство заливки 1 цветом, то, очевидно, оно закрасит 3 многоугольника одним цветом.

Я попытался передать список из 3 элементов в 'Свойство fill-color ', но оно вызывает ошибку.

Простое решение - создать 3 разных слоя, но в моем случае это невозможно.При необходимости использовать мультиполигон

Есть идеи?

threeHouses = {
    "type": "MultiPolygon",
    "coordinates": [
    [
      [
        [
          115.813867,
          -31.932177
        ],
        [
          115.813867,
          -31.932177
        ],
        [
          115.813867,
          -31.932087
        ],
        [
          115.813962,
          -31.932087
        ],
        [
          115.813962,
          -31.932124
        ],
        [
          115.814005,
          -31.932124
        ],
        [
          115.814005,
          -31.932168
        ],
        [
          115.813962,
          -31.932168
        ],
        [
          115.813962,
          -31.932177
        ],
        [
          115.813867,
          -31.932177
        ]
      ]
    ], [
      [
        [
          115.813962,
          -31.932087
        ],
        [
          115.813894,
          -31.932087
        ],
        [
          115.813894,
          -31.932042
        ],
        [
          115.81391,
          -31.932042
        ],
        [
          115.81391,
          -31.931967
        ],
        [
          115.813984,
          -31.931967
        ],
        [
          115.813984,
          -31.932042
        ],
        [
          115.81401,
          -31.932042
        ],
        [
          115.81401,
          -31.932087
        ],
        [
          115.813962,
          -31.932087
        ]
      ]
    ], [
      [
        [
          115.81391,
          -31.931967
        ],
        [
          115.81391,
          -31.931931
        ],
        [
          115.813849,
          -31.931931
        ],
        [
          115.813849,
          -31.9319
        ],
        [
          115.81386,
          -31.9319
        ],
        [
          115.81386,
          -31.931868
        ],
        [
          115.813984,
          -31.931868
        ],
        [
          115.813984,
          -31.931967
        ],
        [
          115.81391,
          -31.931967
        ]
      ]
     ]
     ]
    }

    mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleGdsZWl0aCIsImEiOiIwZU0xU2RZIn0.z4BFqvJIf6fnzlIGQUmptQ';
    var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [115.813867, -31.932177],
    zoom: 17
    });
    map.on('load', function () {
       map.addLayer({
        'id': 'maine',
        'type': 'fill',
        'source': {
            'type': 'geoj,
        'paint': {
            'fill-color': '#189',
            'fill-opacity': 0.8
        }
    });
    });

Answer 1

Вы можете использовать выражение данных.

Вот пример - https://docs.mapbox.com/mapbox-gl-js/example/data-driven-lines/

В вашем случае это будет выглядеть так

let data = {
    'type': 'FeatureCollection',
    'features': [{
        'type': 'Feature',
        'properties': {
            'color': 'red'
        },
        'geometry': {
            'type': 'Polygon',
            'coordinates': [
                [
                    [
                        115.813867,
                        -31.932177
                    ],
                    [
                        115.813867,
                        -31.932177
                    ],
                    [
                        115.813867,
                        -31.932087
                    ],
                    [
                        115.813962,
                        -31.932087
                    ],
                    [
                        115.813962,
                        -31.932124
                    ],
                    [
                        115.814005,
                        -31.932124
                    ],
                    [
                        115.814005,
                        -31.932168
                    ],
                    [
                        115.813962,
                        -31.932168
                    ],
                    [
                        115.813962,
                        -31.932177
                    ],
                    [
                        115.813867,
                        -31.932177
                    ]
                ]
            ]
        }
    }, {
        'type': 'Feature',
        'properties': {
            'color': 'blue'
        },
        'geometry': {
            'type': 'Polygon',
            'coordinates': [
                [
                    [
                        115.813962,
                        -31.932087
                    ],
                    [
                        115.813894,
                        -31.932087
                    ],
                    [
                        115.813894,
                        -31.932042
                    ],
                    [
                        115.81391,
                        -31.932042
                    ],
                    [
                        115.81391,
                        -31.931967
                    ],
                    [
                        115.813984,
                        -31.931967
                    ],
                    [
                        115.813984,
                        -31.932042
                    ],
                    [
                        115.81401,
                        -31.932042
                    ],
                    [
                        115.81401,
                        -31.932087
                    ],
                    [
                        115.813962,
                        -31.932087
                    ]
                ]
            ]
        }
    }, {
        'type': 'Feature',
        'properties': {
            'color': 'green'
        },
        'geometry': {
            'type': 'Polygon',
            'coordinates': [
                [
                    [
                        115.81391,
                        -31.931967
                    ],
                    [
                        115.81391,
                        -31.931931
                    ],
                    [
                        115.813849,
                        -31.931931
                    ],
                    [
                        115.813849,
                        -31.9319
                    ],
                    [
                        115.81386,
                        -31.9319
                    ],
                    [
                        115.81386,
                        -31.931868
                    ],
                    [
                        115.813984,
                        -31.931868
                    ],
                    [
                        115.813984,
                        -31.931967
                    ],
                    [
                        115.81391,
                        -31.931967
                    ]
                ]
            ]
        }
    }]
};

map.on('load', function () {
    map.addLayer({
        'id': 'maine',
        'type': 'fill',
        'source': {
            'type': 'geojson',
            'data': data
        },
        'layout': {},
        'paint': {
            'fill-color': ['get', 'color'],
            'fill-opacity': 0.8
        }
    });
});