Как изменить цвета набора данных, используя mapbox

Question

Итак, я пытаюсь разрешить пользователям моей карты выбирать радиокнопку, и если значение этой радиокнопки совпадает с именем в проекте Obj, я хочу, чтобы этот круг стал красным. Ниже я показываю, как создать радио-кнопки (hbs) и функцию projectGrab. Я знаю, что могу изменить цвета слоев, так как я могу переместить карту. Вызов SetPaintProperty внутри моего цикла for и заставить его поворачивать каждый круг красным.

Я знаю, что оператор if тоже работает, он может найти совпадение, но по какой-то причине, как бы я ни пытался, я не могу изменить цвет.

Я добавил слой в цикл for, потому что не мог придумать, как провести различие между каждым местоположением.

Создание радио. Имена спонсоров - это просто массив имен, которые я получил из SQL-запроса. Некоторые из них соответствуют funder_titles

  {{#each funder_names}}

  <label for={{this}}>
  <input type="radio" name="country1" class="checkboxSelect" value="{{this}}" onClick="projectsGrab(this.value)" >{{this}}
  </label>
  {{/each}}

Добавление слоя

for (i = 0; i < projectsObj.features.length; i++) {

        map.addLayer({
          id: 'project_locations' + projectsObj.features[i].geometry.coordinates,
          type: 'circle',

          maxzoom: zoomthreshold,
          // Add a GeoJSON source containing place coordinates and information.
          source: {
            type: 'geojson',
            data: projectsObj
          },
          paint: {
            "circle-radius": 15,
            "circle-color": "#FFFFFF",
            "circle-stroke-width": 2,
            "circle-stroke-color": "#FFFFFF"
          }

        })

      }

фломастер

 function projectsGrab(value) {



      for (i = 0; i < projectsObj.features.length; i++) {


        if (projectsObj.features[i].properties.funder_title === value) {

          projectHighlighter(projectsObj.features[i].geometry.coordinates)

        }

      }





    }

    function projectHighlighter(geo) {
      console.log('fired')


      map.setPaintProperty('project_locations' + geo, 'circle-color', '#FF0000')



    }

ProjectObj

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -5.943629,
                    54.559632
                ]
            },
            "place_name": "18a Newforge Lane, Belfast, Belfast, BT95NU, United Kingdom",
            "properties": {
                "funder_title": "Engineering"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    36.81667,
                    -1.28333
                ]
            },
            "place_name": "Nairobi, Nairobi, Kenya",
            "properties": {
                "funder_title": "Arts and Hu"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -2.97,
                    56.464
                ]
            },
            "place_name": "Dundee, Dundee City, Scotland, United Kingdom",
            "properties": {
                "funder_title": "Chief Scien"
            }
        }
    ]
}

Answer 1

Один быстрый комментарий, а затем рекомендуемое изменение вашего подхода.

Комментарий

Ваш цикл for, по-видимому, добавляет один стиль для каждой функции и присваивает им идентификаторы в зависимости от их порядка в вашем объекте.Из вашего описания кажется, что ваша цель состоит в том, чтобы создать только один слой стилей, поэтому вам, вероятно, придется изменить свой подход, чтобы избежать путаницы в будущем.

Рекомендуемый подход

Если вы хотитеиметь условный стиль, основанный на состоянии радио-боттона.Вы можете достичь этого, используя состояние объекта .

Вот пример того, как это выглядит в действии: https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/

---

⚠️ Отказ от ответственности: в настоящее время я работаю в Mapbox ⚠️