#javascript #mapbox #mapbox-gl-js
#javascript #mapbox #mapbox-gl-js
Вопрос:
Я некоторое время работал с mapboxgl, и мне нужно изменить цвет круга в зависимости от местоположения пользователя. Круг начинается с цвета, если пользователь находится на вершине круга, он меняется на другой цвет, и, основываясь на взаимодействии пользователя с приложением, он снова меняет цвет.
Это мои исходные данные и данные слоя:
const pontosCircle = pontos.map((pointRoute) => ({
id: pointRoute.order,
type: 'Feature',
properties: { collected: 0, name: pointRoute.order },
geometry: { type: 'Point', coordinates: pointRoute.coordinates }
}));
const sourceId = 'pontos';
const source = {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: pontosCircle
}
};
const layerCircles = {
id: 'pontosRota',
type: 'circle',
source: sourceId,
paint: {
'circle-color': [
'case',
['==', ['get', 'collected'], 0],
'rgba(235, 68, 90, .8)',
['==', ['get', 'collected'], 1],
'rgba(17, 105, 54, .8)',
['==', ['get', 'collected'], 2],
'#ffffff',
'#000000'
],
'circle-stroke-width': 2,
'circle-stroke-color': [
'case',
['==', ['get', 'collected'], 0],
'rgba(235, 68, 90, .8)',
['==', ['get', 'collected'], 1],
'rgba(17, 105, 54, .8)',
['==', ['get', 'collected'], 2],
'#ffffff',
'#000000'
],
'circle-radius': {
stops: [
[0, 0],
[20, metersToPixelsAtMaxZoom(rota.raioColeta, rota.pontos[0].ponto.coordinates[1])]
],
base: 2
}
}
};
const layerLabels = {
id: 'pontosRota-labels',
type: 'symbol',
source: sourceId,
layout: {
'text-field': '{name}',
'text-size': 14
}
};
И это код, который загружает слой / источник в mapbox:
if (!map.getSource(sourceId)) {
map.addSource(sourceId, source);
}
if (!map.getLayer(layerCircles.id) amp;amp; !map.getLayer(layerLabels.id)) {
map.addLayer(layerCircles);
map.addLayer(layerLabels);
}
Я перепробовал множество примеров, которые могли бы помочь мне изменить свойство, полученное из данных, но не смог заставить его работать. Должен ли я удалять все слои и источники каждый раз, когда мне нужно изменить данные, или есть другой способ нарисовать только один из кругов?
Ответ №1:
Я думаю, что setData()
метод, доступный для источников GeoJSON в Mapbox GL JS, — это то, что вы ищете. Метод позволяет обновлять базовые исходные данные и запускает повторный рендеринг карты. Затем следует использовать стиль, основанный на данных, и стилизовать ваши слои обновлений по желанию.
https://docs.mapbox.com/mapbox-gl-js/api/sources/#geojsonsource#setdata
Вот пример псевдокода
map.getSource("source-id").setData(updatedGeoJSONData);
Я нахожусь в процессе составления руководства для разработчиков Mapbox, которое будет включать руководства по такого рода материалам. Это еще не сделано, но вы можете следить за обновлениями и получать уведомления, когда они будут выпущены здесь.