Как сделать хороплетную карту с помощью Mapbox GL JS и объекта? - PullRequest
Новая
       63

Как сделать хороплетную карту с помощью Mapbox GL JS и объекта?

1 голос
/ 26 мая 2020

Я изо всех сил пытаюсь найти нужную информацию, чтобы создать карту хороплет с помощью mapbox. Их примеры очень расплывчаты.

Сейчас у меня есть гео json, показывающее многоугольники для всех округов Великобритании. Я использовал map.addLayer, чтобы добавить это на карту, но на данный момент вся карта одного цвета: 

        map.addLayer({
        "id": 'counties',
        "type": "fill",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": counties
            }
        },
        "layout": {},
        "paint": {
            "fill-color": fill,
            "fill-opacity": 0.8
        }
    });

countities - это файл geo json, который также включает свойство с именем ' Округ'. Кроме того, я вернул объект, который возвращает пары ключей, значений округов и количество раз, которое он появлялся в моих данных, соответственно: 

{
    "Bristol": 2,
    "Cheshire": 1,
    "City and County of the City of London": 14,
    "City of Aberdeen": 1,
    "City of Edinburgh": 3
}

Как я могу создать карту хороплет, используя данные из моего объекта, чтобы вернуть как разные оттенки / цвет для слоя (например, графства, такие как Чешир, будут более светлым цветом, потому что значение равно единице, но город и графство лондонского Сити будут иметь более темный цвет, потому что значение равно 14?

Ответы [ 2 ]

0 голосов
/ 31 мая 2020

Как ваша geo json структурирована?

Самый простой способ - добавить к вашим функциям свойство, например, под названием «частота». Затем вы можете использовать стиль Mapbox GL JS, управляемый данными, например: 

'fill-color': {
property: 'frequency',
stops: [[2, '#fff'], [5, '#f00']]
}

Отметьте это сообщение Mapbox: https://blog.mapbox.com/data-driven-styling-for-fill-layers-in-mapbox-gl-js-80bb5292af4e

0 голосов
/ 28 мая 2020

Самый простой способ - использовать библиотеку mapbox-choropleth .

...